如何使用Redux Toolkit改造移动端商城购物车Reducer

1. 定义购物车 Slice #

基于商品ID+数量的数据结构，用createSlice实现包含所有核心功能的reducer和action：

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

// 初始状态：购物车商品列表
const initialState = {
  cartItems: []
};

const cartSlice = createSlice({
  name: 'cart',
  initialState,
  reducers: {
    // 添加商品：已存在则加量，不存在则新增
    addToCart: (state, action) => {
      const targetItem = state.cartItems.find(item => item.id === action.payload.id);
      if (targetItem) {
        targetItem.quantity += 1;
      } else {
        // 默认数量为1，合并传入的商品信息
        state.cartItems.push({ ...action.payload, quantity: 1 });
      }
    },
    // 单独增加指定商品数量
    increaseQuantity: (state, action) => {
      const item = state.cartItems.find(item => item.id === action.payload);
      if (item) item.quantity += 1;
    },
    // 减少商品数量：数量为1时直接移除
    decreaseQuantity: (state, action) => {
      const item = state.cartItems.find(item => item.id === action.payload);
      if (item) {
        item.quantity > 1 ? item.quantity -= 1 : 
          state.cartItems = state.cartItems.filter(i => i.id !== action.payload);
      }
    },
    // 移除指定商品
    removeFromCart: (state, action) => {
      state.cartItems = state.cartItems.filter(item => item.id !== action.payload);
    },
    // 清空购物车
    clearCart: (state) => {
      state.cartItems = [];
    }
  }
});

// 导出所有action creator，供组件调用
export const { 
  addToCart, 
  increaseQuantity, 
  decreaseQuantity, 
  removeFromCart, 
  clearCart 
} = cartSlice.actions;

// 导出reducer，用于配置store
export default cartSlice.reducer;

2. 整合到已创建的Store中 #

将购物车reducer添加到你的store配置里（假设你的store是用configureStore创建的）：

import { configureStore } from '@reduxjs/toolkit';
// 导入刚才创建的购物车reducer
import cartReducer from './path/to/cartSlice';

export const store = configureStore({
  reducer: {
    // 挂载到cart命名空间下
    cart: cartReducer,
    // 其他reducer...
  }
});

3. 组件中使用示例 #

通过useSelector获取购物车状态，useDispatch触发action：

import { useSelector, useDispatch } from 'react-redux';
import { 
  addToCart, 
  increaseQuantity, 
  decreaseQuantity, 
  removeFromCart, 
  clearCart 
} from './path/to/cartSlice';

function Cart() {
  // 获取购物车列表
  const cartItems = useSelector(state => state.cart.cartItems);
  const dispatch = useDispatch();

  // 示例：添加商品到购物车（payload为商品对象，需包含id）
  const handleAddProduct = (product) => {
    dispatch(addToCart(product));
  };

  return (
    <div className="cart">
      {cartItems.map(item => (
        <div key={item.id} className="cart-item">
          <h3>{item.name}</h3>
          <div className="quantity-control">
            <button onClick={() => dispatch(decreaseQuantity(item.id))}>-</button>
            <span>{item.quantity}</span>
            <button onClick={() => dispatch(increaseQuantity(item.id))}>+</button>
          </div>
          <button onClick={() => dispatch(removeFromCart(item.id))}>删除</button>
        </div>
      ))}
      <button className="clear-btn" onClick={() => dispatch(clearCart())}>清空购物车</button>
    </div>
  );
}

export default Cart;

关键说明 #

• Redux Toolkit的createSlice内置Immer，允许直接修改state（无需手动返回新状态），内部会自动生成不可变更新。
• addToCart的action payload需要包含商品的id，以及你需要展示的其他商品信息（如名称、价格等）。
• 所有action creator都是自动生成的，直接导出即可在组件中使用。

内容的提问来源于stack exchange，提问作者Jesee Kiigu