如何使用Redux Toolkit+Strapi+React防止购物车商品重复？

问题根源分析 #

从你提供的CartReducer.js代码来看，addToCart reducer存在几个关键问题：

• payload结构不匹配：你通过action.payload.id判断商品是否存在，但添加到购物车的却是action.payload.product，这会导致判断逻辑和实际添加的对象脱节——如果action.payload.product的id和action.payload.id不一致，或者你实际传入的payload里并没有product字段，就会不断添加新商品。
• 状态更新方式不一致：Redux Toolkit允许直接修改state（基于Immer库），但你在else分支里返回了新的state对象，而if分支里是直接修改现有state，这种混合写法可能导致状态更新异常。
• 初始state设计存疑：count字段是数组，但购物车的数量应该是每个商品对象的属性（比如每个cart item包含id、count、name等），单独的count数组无法和商品对应。

修复方案 #

1. 统一payload结构与判断逻辑 #

确保传入addToCart的payload是完整的商品对象（包含id、count及其他商品信息），修改reducer逻辑：

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

const initialState = {
  isCartOpen: false,
  cart: [],
  products: [],
};

export const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {
    setProducts: (state, action) => {
      state.products = action.payload;
    },

    addToCart: (state, action) => {
      const targetItem = state.cart.find(item => item.id === action.payload.id);
      if (targetItem) {
        // 商品已存在，增加数量
        targetItem.count += action.payload.count;
      } else {
        // 商品不存在，添加到购物车，确保包含count属性
        state.cart.push({
          ...action.payload,
          count: action.payload.count || 1 // 兜底默认数量为1
        });
      }
    },
  },
});

2. 检查调用addToCart的地方 #

确认你在组件中调用dispatch(addToCart(...))时，传入的参数是正确的商品对象，比如：

// 正确示例：传入包含id和count的商品对象
dispatch(addToCart({ id: 1, name: "商品A", count: 1 }));

避免传入结构混乱的payload（比如嵌套的product字段），确保和reducer中的逻辑匹配。

3. 清理无效的初始state字段 #

删除初始state中多余的count: []字段，因为购物车的数量应该依附于每个商品项，不需要单独维护数组。

额外验证步骤 #

• 在调用addToCart前后打印state，确认商品id的匹配逻辑是否正常触发。
• 检查是否有其他地方误调用了addToCart（比如重复触发的事件监听）。

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