React Redux 更新项目数量（不止一个增量）

Question

我有一个网站，用户可以在将产品添加到购物车之前增加产品的数量。现在，如果用户决定返回产品并通过增加产品数量再添加 3 个产品，然后添加到购物车 - 如何更新购物篮中现有产品的数量？

目前，根据选择的内容，我得到了不同数量的产品副本。

这是我的减速器代码：

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;

payload是具体的产品，会是一个对象：

{
 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，您可以改变状态对象，这样您就可以稍微简化一下。不是映射一个新数组并将其设置回状态，而是改变找到的对象。

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

React Redux 更新项目数量（不止一个增量）

React Redux update item quantity (more than just one increment)

javascript

ecmascript-6

reactjs

react-redux

redux-toolkit