javascript - React Redux 更新项目数量(不止一个增量)

Question

我有一个网站，用户可以在将产品添加到购物车之前增加产品的数量。现在，如果用户决定返回产品并通过增加产品数量再添加 3 个，然后添加到购物车 - 如何更新篮子中现有产品的数量？
目前，我会根据所选内容获得不同数量的产品副本。
这是我的 reducer 的代码:

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  items: [],
};

const basket = createSlice({
  name: "basket",
  initialState,
  reducers: {
    addToBasket: (state, { payload }) => {
        // No idea what to do with this..
      state.items.filter((pizza) => pizza.name === payload.name);

      // This pushes the item fine, but I get multiple of the same item in the cart instead of just updating its quantity
      state.items.push(payload);



      //   state.items.map((pizza) =>
      //     pizza.name === payload.name
      //       ? {
      //           ...pizza,
      //           quantity: pizza.quantity + payload.quantity,
      //         }
      //       : pizza
      //   );


    },
  },
});

export const { addToBasket } = basket.actions;
export const basketItems = (state) => state.basket.items;

export default basket.reducer;

有效载荷是特定的产品，它将是一个对象:

{
 name: "product name",
 image: "url.jpeg",
 price: "14.99"
}

我无法为我的生活弄清楚在这里做什么才能不变异状态。没有任何效果，我觉得我已经尝试了所有可能的方法，但显然我错过了一些东西。
非常感谢任何帮助!!!
谢谢

Answer 1

您实际上拥有所需的所有代码，只需要正确应用即可。首先检查该项目是否已经在 items 中数组与否。如果它已经存在，则复制现有状态并更新匹配元素。如果未包含，则将新项目附加到数组的末尾。

const basket = createSlice({
  name: "basket",
  initialState,
  reducers: {
    addToBasket: (state, { payload }) => {
      const item = state.items.find((pizza) => pizza.name === payload.name);

      if (item) {
        state = state.items.map((pizza) =>
          pizza.name === payload.name
            ? {
                ...pizza,
                quantity: pizza.quantity + payload.quantity
              }
            : pizza
        );
      } else {
        state.items.push(payload);
      }
    },
  },
});

使用 Redux-Toolkit，你可以改变 state 对象，这样你就可以稍微简化一下。而不是映射一个新数组并将其设置回状态，而是改变找到的对象。

const basket = createSlice({
  name: "basket",
  initialState,
  reducers: {
    addToBasket: (state, { payload }) => {
      const item = state.items.find((pizza) => pizza.name === payload.name);

      if (item) {
        item.quantity += payload.quantity;
      } else {
        state.items.push(payload);
      }
    },
  },
});