redux 从特定用户添加的购物车中删除产品

oprakyz7  于 2023-03-23  发布在  其他
关注(0)|答案(1)|浏览(124)

我已经创建了一个购物车功能,如果用户点击“添加到购物车”按钮,产品将被添加到购物车中。购物车项目将存储在本地存储中。我已经在react中创建了这个,也使用了redux。添加到购物车后,数据将如下所示:

因此,从另一个用户,我已经添加了一个相同的产品到购物车和JSON将看起来像这样:

因此,当我从另一个用户的购物车中删除商品时,产品也会从两个用户的购物车中删除。

那么,如何从特定用户的购物车中删除特定商品呢?
推车减速器代码

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;
}

};
从购物车中删除项目操作

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

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

};

pcww981p

pcww981p1#

在您的REMOVE_CART_ITEM案例中,如果您只想为特定用户删除给定的产品,则应该在userIdproduct上进行过滤。
你可以把你的案例改成这样:

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

你的removeItemsFromCart就是:

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

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

相关问题