如何防止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;

My JSON file:

[
{
"_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

假设你的产品有一个quantity属性:

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

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

用下面的代码更新你的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]
}
},
})

在你想要使用减速器的页面中添加这个:

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文件中添加quantity属性，也不需要在选择产品放入购物车时添加api。上面的数量将检查该商品是否存在于购物车中，数量将为1，并且它将被添加到产品项目的对象中，如果该商品存在于购物车中，它将更新数量1。

现在一切都正常了。如果你有什么错误，请随时给我发信息，我将非常乐意帮助你