更新 reducer 中对象数组中的对象属性 - Redux

Question

大家好，我正在努力寻找最佳方法来更新对象数组中对象的属性值，而不改变我的 reducer 中的数组。

这是我的减速器文件：

const initialState = {
    products:[]
};

export default function basketReducer(state = initialState, action){
    switch (action.type) {
        case "ADD_PRODUCT_TO_BASKET":
            return state
        case "REMOVE_PRODUCT_FROM_BASKET":
            return state
        default:
            return state
    }
};

这是产品对象的示例：

{
     id: 1,
     name: "product 1",
     quantity: 1,
     price: 1.0,
}

当我添加一个已经在我的数组中的产品（相同的 id）时，我想将他的数量属性增加一个。我已经有了检查该项目是否已存在于我的数组中的功能，我只是在寻找一种方法来更新数量属性而不改变数组。

感谢您的帮助！

更新：根据@Will Jenkins 的回答，我写了这段代码：

case "ADD_PRODUCT_TO_BASKET": {
            const index = state.products.findIndex(p => p.id === action.payload.id);
            if(index !== -1){
                const productId = action.payload.id
                return {...state, products: state.products.map(p => p.id === productId ? {...p, quantity:p.quantity+1} : p)}
            }else {
                return {products: [...state.products].concat(action.payload)};
            }
        }

这很好用，当我添加一个新产品时，它会附加到数组中，如果我添加相同的产品，他的数量会增加一个，但我很确定我可以重构这段代码，有人有吗一个提议？

Answer 1

假设您将产品 ID 作为您操作的负载传递，映射您的产品并增加与该 ID 匹配的产品的数量：

case "ADD_PRODUCT_TO_BASKET": {
        const productId = payload
        return {...state, products: state.products.map(p => p.id === productId ? {...p, quantity:p.quantity+1} : p)}
}

更新

我会选择更长的形式，这样其他人（或未来的你）更容易理解和维护：

case "ADD_PRODUCT_TO_BASKET": {
    const addedProduct = action.payload;
    const productId = addedProduct.id;
    const exists = state.products.some((p) => p.id === productId);
    if (exists) {
      const products = state.products.map((p) =>
        p.id === productId ? { ...p, quantity: p.quantity + 1 } : p
      );
      return { ...state, products };
    } else {
      return {
        ...state,
        products: [...state.products, { ...addedProduct }]
      };
    }
  }

Answer 2

我建议不要直接改变数组，而是复制它，映射数组，然后更改所需对象的属性。不直接改变会省去很多麻烦，而且通常是一种更好的代码编写方式。

幸运的是，map函数并没有直接变异returns一个新的数组。

    const newArr = arr.map(product => product.id === id ? {...product, product.quantity += 1} : product);

更新 reducer 中对象数组中的对象属性 - Redux

Update object property in array of objetcs in reducer - Redux

reactjs

redux

reducers

更新 reducer 中对象数组中的对象 属性 - Redux

Update object property in array of objetcs in reducer - Redux

reactjs

redux

reducers

更新 reducer 中对象数组中的对象属性 - Redux