更新减速器中对象数组中的对象属性 - Redux答案

【问题标题】：Update object property in array of objetcs in reducer - Redux更新减速器中对象数组中的对象属性 - Redux
【发布时间】：2021-03-17 14:52:56
【问题描述】：

大家好，我正在尝试找到在我的 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)};
            }
        }

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

【问题讨论】：

标签： reactjs redux reducers

【解决方案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 }]
      };
    }
  }

【讨论】：

谢谢，这很好，但我也想添加产品在数组中不存在的情况，我更新了我的帖子。

【解决方案2】：

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

好在map函数没有直接变异，返回一个新数组。

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

【讨论】：