Redux reducer 检查项目是否已存在于状态中的正确方法

Question

在更新现有对象或将新对象添加到 redux 存储时，我对这种方法有点不确定，但我无法使用公认的方法（即 Object.assign、update() 或传播运营商。我可以让它按如下方式工作：

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

尽管这行得通，但我正在使用 Underscore 复制状态并检查该项目是否已经存在于看起来不必要且矫枉过正的状态中？

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

Redux reducer 检查项目是否已存在于状态中的正确方法

Redux reducer correct way to check if item already exists in state

react-redux