How to prevent duplicate items in redux store?-CodePudding

I am using Redux-toolkit. I am trying to prevent duplicate items in my store and also want to if any user tries to add the same item again. This time I want to simple update her quantity.

Here is my code:

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"
  }
]

CodePudding user response：

Assuming that there is a quantity property on your product:

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

CodePudding user response：

If you are using sanity in your project follow the code below, it will update your quantity instead of adding the same product again in the cart, if you are not using sanity have a look at the code below I am sure it will give you some ideas to solve your problem.

update your cartSlice with the code below :

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

in the the page you want to use the reducer in add this:

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 is an onClick function, you do not need to add quantity property to your json file or the api it will be added when the product is selected to be in cart. the quantity above it will check if the item does not exist in the cart the quantity will be 1 and it will be added to the object of the product item, If the item does exist in the cart it will update the quantity by one.

Now everything should work just fine. if you had an error please feel free to message me, I would be more than happy to help you