Reduxの状態管理をスリム化するスライス設計のベストプラクティス

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

const initialState = {
  items: [], // カート内の商品
  totalQuantity: 0, // 合計商品の個数
};

const cartSlice = createSlice({
  name: 'cart',
  initialState,
  reducers: {
    addItem(state, action) {
      const newItem = action.payload;
      const existingItem = state.items.find(item => item.id === newItem.id);
      if (existingItem) {
        existingItem.quantity += newItem.quantity;
      } else {
        state.items.push(newItem);
      }
      state.totalQuantity += newItem.quantity;
    },
    removeItem(state, action) {
      const id = action.payload;
      const existingItem = state.items.find(item => item.id === id);
      if (existingItem) {
        state.totalQuantity -= existingItem.quantity;
        state.items = state.items.filter(item => item.id !== id);
      }
    },
    clearCart(state) {
      state.items = [];
      state.totalQuantity = 0;
    },
  },
});

export const { addItem, removeItem, clearCart } = cartSlice.actions;
export default cartSlice.reducer;

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

const store = configureStore({
  reducer: {
    cart: cartReducer,
  },
});

export default store;

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addItem, removeItem, clearCart } from './cartSlice';

const Cart = () => {
  const dispatch = useDispatch();
  const cartItems = useSelector(state => state.cart.items);
  const totalQuantity = useSelector(state => state.cart.totalQuantity);

  const handleAddItem = () => {
    dispatch(addItem({ id: 1, name: 'Product A', quantity: 1 }));
  };

  const handleRemoveItem = () => {
    dispatch(removeItem(1));
  };

  const handleClearCart = () => {
    dispatch(clearCart());
  };

  return (
    <div>
      <h2>Shopping Cart</h2>
      <p>Total Items: {totalQuantity}</p>
      <button onClick={handleAddItem}>Add Product A</button>
      <button onClick={handleRemoveItem}>Remove Product A</button>
      <button onClick={handleClearCart}>Clear Cart</button>
      <ul>
        {cartItems.map(item => (
          <li key={item.id}>
            {item.name} - {item.quantity}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Cart;

import { useSelector } from 'react-redux';

const CartDetails = () => {
  const cartItems = useSelector(state => state.cart.items); // カート内の商品を取得
  const totalQuantity = useSelector(state => state.cart.totalQuantity); // 合計個数を取得

  return (
    <div>
      <h2>Cart Details</h2>
      <p>Total Items: {totalQuantity}</p>
      <ul>
        {cartItems.map(item => (
          <li key={item.id}>
            {item.name} - {item.quantity}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default CartDetails;

import { useDispatch } from 'react-redux';
import { addItem, removeItem, clearCart } from './cartSlice';

const CartActions = () => {
  const dispatch = useDispatch();

  const handleAddItem = () => {
    dispatch(addItem({ id: 1, name: 'Product A', quantity: 1 })); // 商品を追加
  };

  const handleRemoveItem = () => {
    dispatch(removeItem(1)); // 商品を削除
  };

  const handleClearCart = () => {
    dispatch(clearCart()); // カートをクリア
  };

  return (
    <div>
      <h2>Cart Actions</h2>
      <button onClick={handleAddItem}>Add Product A</button>
      <button onClick={handleRemoveItem}>Remove Product A</button>
      <button onClick={handleClearCart}>Clear Cart</button>
    </div>
  );
};

export default CartActions;

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import CartDetails from './CartDetails';
import CartActions from './CartActions';

const App = () => (
  <Provider store={store}>
    <div>
      <CartDetails />
      <CartActions />
    </div>
  </Provider>
);

ReactDOM.render(<App />, document.getElementById('root'));

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

const selectItems = state => state.cart.items;
const selectTotalQuantity = createSelector(
  [selectItems],
  items => items.reduce((total, item) => total + item.quantity, 0)
);

src/
├── features/
│   ├── auth/
│   │   ├── authSlice.js
│   │   ├── AuthComponent.js
│   │   └── authSelectors.js
│   ├── products/
│   │   ├── productsSlice.js
│   │   ├── ProductsList.js
│   │   └── productsSelectors.js
│   ├── cart/
│   │   ├── cartSlice.js
│   │   ├── CartComponent.js
│   │   └── cartSelectors.js
│   └── orders/
│       ├── ordersSlice.js
│       ├── OrdersList.js
│       └── ordersSelectors.js
└── store.js

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

const authSlice = createSlice({
  name: 'auth',
  initialState: { userId: null, token: null },
  reducers: {
    login(state, action) {
      state.userId = action.payload.userId;
      state.token = action.payload.token;
    },
    logout(state) {
      state.userId = null;
      state.token = null;
    },
  },
});

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

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

// 非同期処理の作成
export const fetchProducts = createAsyncThunk(
  'products/fetchProducts',
  async () => {
    const response = await api.get('/products');
    return response.data;
  }
);

const productsSlice = createSlice({
  name: 'products',
  initialState: { items: [], status: 'idle' },
  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) => {
        state.status = 'failed';
      });
  },
});

export default productsSlice.reducer;

import authReducer, { login, logout } from './authSlice';

test('should handle a user logging in', () => {
  const previousState = { userId: null, token: null };
  const newState = authReducer(
    previousState,
    login({ userId: 1, token: 'abc123' })
  );
  expect(newState).toEqual({ userId: 1, token: 'abc123' });
});

test('should handle a user logging out', () => {
  const previousState = { userId: 1, token: 'abc123' };
  const newState = authReducer(previousState, logout());
  expect(newState).toEqual({ userId: null, token: null });
});

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;

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

export const fetchUser = createAsyncThunk(
  'user/fetchUser',
  async (userId) => {
    const response = await api.get(`/users/${userId}`);
    return response.data;
  }
);

const userSlice = createSlice({
  name: 'user',
  initialState: { data: null, status: 'idle' },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.data = action.payload;
      })
      .addCase(fetchUser.rejected, (state) => {
        state.status = 'failed';
      });
  },
});

export default userSlice.reducer;

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

const selectCartItems = (state) => state.cart.items;

export const selectTotalQuantity = createSelector(
  [selectCartItems],
  (items) => items.reduce((total, item) => total + item.quantity, 0)
);

import { useSelector } from 'react-redux';
import { selectTotalQuantity } from './cartSlice';

const CartSummary = () => {
  const totalQuantity = useSelector(selectTotalQuantity);
  return <p>Total Items: {totalQuantity}</p>;
};

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

const store = configureStore({
  reducer: {
    cart: cartReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(/* custom middleware */),
});

export default store;

const store = configureStore({
  reducer: {
    cart: cartReducer,
  },
  devTools: process.env.NODE_ENV !== 'production', // 本番環境では無効化
});