如何移除特定用户添加到购物车中的指定商品？

我用React+Redux开发了购物车功能，点击“Add to Cart”按钮就能把商品加入购物车，购物车数据存在Local Storage里。现在遇到个问题：不同用户添加同一件商品后，其中一个用户删除这件商品时，两个用户的购物车里该商品都会被删掉。想请教怎么实现只删除特定用户购物车里的指定商品？

现有代码 #

购物车Reducer

export const CartReducer = (
    state = { cartItems: [], shippingInfo: {} },
    action
) => {
switch (action.type) {
  case ADD_TO_CART:
    const item = action.payload;

    const isItemExist = state.cartItems.find(
      (i) => i.product === item.product
    );

    if (isItemExist) {
      return {
        ...state,
        cartItems: state.cartItems.map((i) =>
          i.product === isItemExist.product ? item : i
        ),
      };
    } else {
      return {
        ...state,
        cartItems: [...state.cartItems, item],
      };
    }

  case REMOVE_CART_ITEM:
    return {
      ...state,
      cartItems: state.cartItems.filter((i) => i.product !== action.payload),
    };

  case SAVE_SHIPPING_INFO:
    return {
      ...state,
      shippingInfo: action.payload,
    };

  default:
    return state;
}
};

移除购物车商品Action

export const removeItemsFromCart = (id,user_id) => async (dispatch, getState) => {
dispatch({
  type: REMOVE_CART_ITEM,
  payload: id
});

localStorage.setItem("cartItems", JSON.stringify(getState().cart.cartItems));
};

问题原因 #

当前的购物车只通过product字段识别商品，没有绑定用户标识。删除商品时会过滤掉所有product匹配的条目，不管条目属于哪个用户，所以才会出现一个用户删商品，其他用户同商品也被删的情况。

解决方案 #

核心思路是给每个购物车条目加上用户ID，操作购物车时同时匹配商品ID和用户ID，确保只处理当前用户的商品。

1. 修改Reducer逻辑

更新ADD_TO_CART的判断条件，同时匹配商品ID和用户ID；修改REMOVE_CART_ITEM的过滤规则，只删除当前用户的目标商品：

export const CartReducer = (
    state = { cartItems: [], shippingInfo: {} },
    action
) => {
switch (action.type) {
  case ADD_TO_CART:
    const item = action.payload;

    // 同时匹配商品ID和用户ID，判断是否已存在于当前用户的购物车
    const isItemExist = state.cartItems.find(
      (i) => i.product === item.product && i.user_id === item.user_id
    );

    if (isItemExist) {
      return {
        ...state,
        cartItems: state.cartItems.map((i) =>
          i.product === item.product && i.user_id === item.user_id ? item : i
        ),
      };
    } else {
      return {
        ...state,
        cartItems: [...state.cartItems, item],
      };
    }

  case REMOVE_CART_ITEM:
    const { productId, userId } = action.payload;
    // 只过滤掉当前用户的目标商品
    return {
      ...state,
      cartItems: state.cartItems.filter(
        (i) => !(i.product === productId && i.user_id === userId)
      ),
    };

  case SAVE_SHIPPING_INFO:
    return {
      ...state,
      shippingInfo: action.payload,
    };

  default:
    return state;
}
};

2. 更新移除商品的Action

把商品ID和用户ID一起传入payload，让Reducer能拿到用户标识做过滤：

export const removeItemsFromCart = (productId, userId) => async (dispatch, getState) => {
dispatch({
  type: REMOVE_CART_ITEM,
  payload: { productId, userId }
});

localStorage.setItem("cartItems", JSON.stringify(getState().cart.cartItems));
};

3. 补充添加商品的Action逻辑（关键）

添加商品到购物车时，必须把当前用户的user_id和商品信息一起传入payload，确保每个购物车条目都绑定用户：

// 示例Add to Cart Action（根据你的实际接口调整）
export const addItemsToCart = (productId, quantity, userId) => async (dispatch, getState) => {
  // 假设这里是获取商品详情的接口请求
  const res = await fetch(`/api/products/${productId}`);
  const productData = await res.json();

  dispatch({
    type: ADD_TO_CART,
    payload: {
      product: productData._id,
      name: productData.name,
      price: productData.price,
      image: productData.images[0]?.url,
      stock: productData.stock,
      quantity,
      user_id: userId // 绑定当前用户ID
    }
  });

  localStorage.setItem("cartItems", JSON.stringify(getState().cart.cartItems));
};

这样修改后，每个购物车条目都和对应的用户ID绑定，删除操作只会针对当前用户的商品，不会影响其他用户的购物车数据。

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