如何防止Redux商店中的重复物品？

Question

我正在使用redux-toolkit。我正在尝试防止商店中的重复项目，并且还希望是否有任何用户试图再次添加同一项目。这次我想简单地更新她的数量。

这是我的代码：

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

const initialState = {
  product: [],
};

export const cartSlice = createSlice({
  name: "cart",
  initialState: initialState,
  reducers: {
    addproduct: (state, action) => {
      console.log(action.payload._id) // here _id is ok
      const exist = state.product.find((pro) => pro._id === action.payload._id)
      console.log(exist) //output undefined
      state.product = [...state.product, action.payload];
    },
  },
})

export const { addproduct } = cartSlice.actions;
export default cartSlice.reducer;

我的JSON文件：

[
  {
    "_id": "62ad4c398bc6d37767e44423",
    "name": "singu pizza",
    "size": "small",
    "category": "neapolitan",
    "price": 250,
    "image": "https://i.ibb.co/zVbq909/pizza.png"
  },
  {
    "_id": "62ad4c398bc6d37767e44424",
    "name": "singu pizza",
    "size": "large",
    "category": "neapolitan",
    "price": 250,
    "image": "https://i.ibb.co/zVbq909/pizza.png"
  }
]

Answer 1

假设您的产品上有一个数量属性：

    addproduct: (state, action) => {
      const item = state.product.find((pro) => pro._id === action.payload._id)
      if (item) {
        item.quantity++
      } else {
        state.product.push(action.payload)
      }
    },

Answer 2

如果您在项目中使用理智，请按照以下代码进行更新的数量，而不是在购物车中再次添加相同的产品，如果您不使用理智，请查看下面的代码，我相信它会给您一些解决您的问题的想法。

更新您的CARTSLICE中的代码：

const initialState = {
  product: [],
};

export const cartSlice = createSlice({
  name: 'cart',
  initialState,
  reducers: {
    addproduct: (state, { payload }) => {
      let newItem = payload;
      const existItem = state.products.find((item) => item._id === payload._id);

      state.products = existItem ? state.products.map((item) => item._id === existItem._id ? newItem : item) : [...state.products, newItem]
    }
  },
})

在您要使用reducer的页面中添加以下内容：

const { products } = useSelector(store => store.cart)

const addToCart = () => {
    let cartItem = products.find(item => item._id === product._id)
    let quantity = cartItem ? cartItem.quantity + 1 : 1;
    dispatch(() => addproduct({
        _id: product._id,
        name: product.name,
        size: product.size,
        category: product.slug.current,
        price: product.price,
        image: urlFor(product.image),
        quantity
      }))
  }

addtocart是onclick函数，不需要将数量属性添加到您的JSON文件中，也不需要在选择“在购物车中”时添加API。上面的数量将检查该项目是否存在于购物车中的数量为1，并且将添加到产品项目的对象中，如果该项目确实存在于购物车中，则该项目将通过一个更新数量。

现在一切都应该很好。如果您有错误，请随时给我发消息，我很乐意为您提供帮助