Redux还原器正确检查项目是否已经存在状态

Question

我在更新现有对象或将新对象添加到redux商店时，我对这种方法有些不确定，但是使用可接受的方法（即object.sapsign，更新（）或传播操作员。我可以按照以下方式进行工作：

const initialState = {
    cart: []
}
export default function cartReducer(state = initialState, action) {
    switch (action.type) {
        case ADD_TO_CART:
            let copy = _.clone(state.cart);
            let cartitem = _.find(copy, function (item) {
                return item.productId === action.payload.productId;
            });
            if (cartitem) {
                cartitem.qty = action.payload.qty;
            } else {
                copy.push(action.payload);
            }
            return {
                ...state,
                cart: copy
            }
        default:
            return state
    }
}

尽管这起作用，但我正在使用下划线来复制状态并检查该项目是否已经存在于状态中，这似乎是不必要的和过度的？

Answer 1

这是redux的代码。使用.find函数查找数组中是否已经存在元素。示例代码：

const inCart = state.cart.find((item) =>
        item.id === action.payload.id ? true : false
      );
 return {
        ...state,
        cart: inCart
          ? state.cart.map((item) =>
              item.id === action.payload.id
                ? { ...item, qty: item.qty + 1 }
                : item
            )
          : [...state.cart, { ...item, qty: 1 }],
      };

使用redux-toolkit，您可以突变状态对象，以便您可以简化一点。

const basket = createSlice({
  name: "cart",
  initialState,
  reducers: {
    addToCart: (state, { payload }) => {
  const inCart= state.cart.find((item) => item.id === payload.id);
      if (inCart) {
        item.qty += payload.qty;
      } else {
        state.items.push(payload);
      }
},
},
});