Redux ToolkitのcreateSliceを活用した効率的な状態管理入門

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter', // 状態の名前
  initialState: { value: 0 }, // 初期状態
  reducers: {
    increment: (state) => {
      state.value += 1; // ミュータブルな操作が可能（Immerライブラリを利用）
    },
    decrement: (state) => {
      state.value -= 1;
    },
    reset: (state) => {
      state.value = 0;
    },
  },
});

export const { increment, decrement, reset } = counterSlice.actions; // アクションをエクスポート
export default counterSlice.reducer; // リデューサーをエクスポート

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; },
    reset: (state) => { state.value = 0; },
  },
});

export const { increment, decrement, reset } = counterSlice.actions;
export default counterSlice.reducer;

// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

// Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, reset } from './counterSlice';

const Counter = () => {
  const count = useSelector((state) => state.counter.value); // 状態の選択
  const dispatch = useDispatch(); // アクションの送信

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(reset())}>Reset</button>
    </div>
  );
};

export default Counter;

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

const App = () => (
  <Provider store={store}>
    <Counter />
  </Provider>
);

export default App;

import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchData = createAsyncThunk(
  'data/fetchData',
  async (endpoint, thunkAPI) => {
    const response = await fetch(endpoint);
    if (!response.ok) {
      throw new Error('Failed to fetch data');
    }
    return response.json();
  }
);

import { createSlice } from '@reduxjs/toolkit';
import { fetchData } from './dataActions';

const dataSlice = createSlice({
  name: 'data',
  initialState: {
    items: [],
    status: 'idle', // 'idle' | 'loading' | 'succeeded' | 'failed'
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchData.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchData.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.items = action.payload;
      })
      .addCase(fetchData.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export default dataSlice.reducer;

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchData } from './dataActions';

const DataList = () => {
  const dispatch = useDispatch();
  const { items, status, error } = useSelector((state) => state.data);

  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchData('https://api.example.com/data'));
    }
  }, [dispatch, status]);

  if (status === 'loading') return <p>Loading...</p>;
  if (status === 'failed') return <p>Error: {error}</p>;

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export default DataList;

// userSlice.js
import { createSlice } from '@reduxjs/toolkit';

const userSlice = createSlice({
  name: 'user',
  initialState: { profile: null, status: 'idle', error: null },
  reducers: {
    login: (state, action) => {
      state.profile = action.payload;
    },
    logout: (state) => {
      state.profile = null;
    },
  },
});

export const { login, logout } = userSlice.actions;
export default userSlice.reducer;

// productSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

export const fetchProducts = createAsyncThunk('products/fetchProducts', async () => {
  const response = await fetch('https://api.example.com/products');
  return response.json();
});

const productSlice = createSlice({
  name: 'products',
  initialState: { items: [], status: 'idle', error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchProducts.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchProducts.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.items = action.payload;
      })
      .addCase(fetchProducts.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export default productSlice.reducer;

// store.js
import { configureStore } from '@reduxjs/toolkit';
import userReducer from './userSlice';
import productReducer from './productSlice';

const store = configureStore({
  reducer: {
    user: userReducer,
    products: productReducer,
  },
});

export default store;

// App.js
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchProducts } from './productSlice';
import { login, logout } from './userSlice';

const App = () => {
  const dispatch = useDispatch();
  const user = useSelector((state) => state.user.profile);
  const products = useSelector((state) => state.products.items);
  const productStatus = useSelector((state) => state.products.status);

  useEffect(() => {
    if (productStatus === 'idle') {
      dispatch(fetchProducts());
    }
  }, [dispatch, productStatus]);

  const handleLogin = () => {
    dispatch(login({ id: 1, name: 'John Doe' }));
  };

  const handleLogout = () => {
    dispatch(logout());
  };

  return (
    <div>
      <h1>Welcome, {user ? user.name : 'Guest'}</h1>
      <button onClick={user ? handleLogout : handleLogin}>
        {user ? 'Logout' : 'Login'}
      </button>
      <h2>Products</h2>
      {productStatus === 'loading' ? (
        <p>Loading...</p>
      ) : (
        <ul>
          {products.map((product) => (
            <li key={product.id}>{product.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default App;

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const apiSlice = createApi({
  reducerPath: 'api', // スライス名
  baseQuery: fetchBaseQuery({ baseUrl: 'https://api.example.com' }), // ベースURL
  endpoints: (builder) => ({
    getProducts: builder.query({
      query: () => '/products', // エンドポイント指定
    }),
    getProductById: builder.query({
      query: (id) => `/products/${id}`,
    }),
  }),
});

export const { useGetProductsQuery, useGetProductByIdQuery } = apiSlice;

import { configureStore } from '@reduxjs/toolkit';
import { apiSlice } from './apiSlice';

const store = configureStore({
  reducer: {
    [apiSlice.reducerPath]: apiSlice.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware),
});

export default store;

// ProductList.js
import React from 'react';
import { useGetProductsQuery } from './apiSlice';

const ProductList = () => {
  const { data: products, error, isLoading } = useGetProductsQuery();

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
};

export default ProductList;

// selectedProductSlice.js
import { createSlice } from '@reduxjs/toolkit';

const selectedProductSlice = createSlice({
  name: 'selectedProduct',
  initialState: null,
  reducers: {
    selectProduct: (state, action) => action.payload,
    clearSelection: () => null,
  },
});

export const { selectProduct, clearSelection } = selectedProductSlice.actions;
export default selectedProductSlice.reducer;

// ProductDetail.js
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useGetProductByIdQuery } from './apiSlice';
import { selectProduct, clearSelection } from './selectedProductSlice';

const ProductDetail = () => {
  const dispatch = useDispatch();
  const selectedProductId = useSelector((state) => state.selectedProduct);
  const { data: product, isLoading } = useGetProductByIdQuery(selectedProductId, {
    skip: !selectedProductId, // 選択されていない場合はリクエストをスキップ
  });

  if (isLoading) return <p>Loading...</p>;
  if (!product) return <p>No product selected.</p>;

  return (
    <div>
      <h1>{product.name}</h1>
      <button onClick={() => dispatch(clearSelection())}>Back</button>
    </div>
  );
};

export default ProductDetail;

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; }, // イミュータブルに処理される
  },
});

const store = configureStore({
  reducer: {
    user: userReducer,
    products: productReducer,
  },
  devTools: process.env.NODE_ENV !== 'production',
});

interface CounterState {
  value: number;
}

const initialState: CounterState = { value: 0 };

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => { state.value += 1; },
  },
});