防止 redux 将重复的商品添加到购物车

Question

我正在使用

redux

将产品放入

react native

项目的购物车中。目前它可以正常工作，但我可以添加重复的项目。我想阻止这种情况发生。

修改将停止存储重复项的减速器的最佳方法是什么？

我的减速机：

const cartItems = (state = [], action) => {
  //action type are the constatns
  switch (action.type) {
    case ADD_TO_CART:
      // TODO: dont add duplicates
      return [...state, action.payload];
      
    case REMOVE_TO_CART:
      //filter through the single item that matches payload and remove it
      return state.filter(cartItem => cartItem !== action.payload);
    case CLEAR_TO_CART:
      //return empty state which clears cart
      return (state = []);
  }
  //return the state
  return state;
};

我的行动：

export const addToCart = (payload) => {
    return {
        type: ADD_TO_CART,
        payload,
    }
}

Answer 1

使用

find

检查状态中是否存在具有该产品 ID 的对象。如果它确实返回状态，否则返回更新后的状态。

const { product_id } = action.payload;
const dupe = state.find(obj => obj.product_id === product_id);
return dupe ? state : [...state, action.payload ];

Answer 2

您可以在执行以下操作之前添加一些代码：

return {...state, cart: [...state.cart].push(payload)}

。例如：

const lookForCart = state?.cart?.find(crt => crt?.cardId === payload?.cardId)
if (lookForCart) return state
return {...state, cart: [...state.cart].push(payload)}

Answer 3

在调用操作 add_cart 之前必须先检查重复项

情况 1：如果不存在 => 推入数组 redux 存储

情况2：如果有物品=>考虑更改属性示例增加数量产品

Answer 4

您应该过滤掉商店中的产品并添加新的

action.payload

• 这将确保有效负载

  quantity

  、

  price

  、

  total

  、

  quantity

  得到更新

代码：

case ADD_TO_CART:
  return [...state.filter(p => p.id !== action.payload.id), action.payload];