How to prevent my items from duplicating using Redux Toolkit + Strapi + React? - reactjs

Question

My Items keep on duplicating on shopping cart and I cant seems to figure out. Hope to get some guidance here and would be a great help for my project!
Below are my code :
CartReducer.js
import { createSlice } from "#reduxjs/toolkit";
const initialState = {
isCartOpen: false,
cart: [],
count: [],
products: [],
};
export const cartSlice = createSlice({
name: "cart",
initialState,
reducers: {
setProducts: (state, action) => {
state.products = action.payload;
},
addToCart: (state, action) => {
const item = state.cart.find(
(product) => product.id === action.payload.id
);
console.log(item);
if (item) {
item.count += action.payload.count;
} else {
return {
...state,
cart: [...state.cart, action.payload.product],
};
}
},
Full Github repo : https://github.com/TheKelvinT/Teck-Hong-CS.git
I've tried looking up several sample projects and changing my code based on those but it still does not work.

Answer 1

the problem you have there, that:
item.count += action.payload.count;
this line actually does nothing, because you don't use this down stream, to make it work that way you would need something like that:
const itemIndex = state.cart.findIndex((product) => product.id === action.payload.id);
if (itemIndex !== -1) {
state.cart[itemIndex] = {...state.cart[itemIndex], count: action.payload.count }
} else ...
Just a note that it is not obvious where you keep your count, the line above adds count to item in the cart.
There might be more issues with this code, hover i can recommend in terms of cart use state normalization technique reference. Although that it may look a bit strange, it is quite easy and powerful:
The first thing is to remove products from cart slice, with slices, it's really better to have them as flat as possible, it's much easier to extend after:
/slices/products.js
import { createSlice } from "#reduxjs/toolkit"
const { actions, reducer } = createSlice({
name: 'products',
initialState: [],
reducers: {
setProducts: (state, {payload}) => payload,
}
})
export const productsReducer = reducer;
export const { setProducts } = actions;
Cart slice, is going to have to main properties, the first one is ids an array of id's of products added to cart, the second one would be products it's so called key value pair with key is product id, value is an object with product property and count an integer for count:
/slices/cart.js
import { createSelector, createSlice } from '#reduxjs/toolkit';
const { actions, reducer } = createSlice({
name: 'cart',
initialState: {
ids: [],
products: {},
},
reducers: {
// the payload is { product, count }
addCart: (state, { payload }) => {
if (!state.ids.includes(payload.product.id)) {
state.ids.push(payload.product.id);
state.products[payload.product.id] = { product: payload.product, count: payload.count };
} else state.products[payload.product.id].count += payload.count;
// you should always validate the count e.g. Math.max(0, payload.count)
},
// this would just remove from cart, you can do yourself count change
removeCart: (state, { payload }) => {
if (state.ids.includes(payload.product.id)) {
state.ids = state.ids.filter((id) => id !== payload.product.id);
delete state.products[payload.product.id];
}
},
},
});
export const cartReducer = reducer;
export const { addCart, removeCart } = actions;
// BONUS, is selector that checks if object is in the cart
// const isInCart = useSelector((state) => isInCartSelector(state, id))
export const isInCartSelector = createSelector(
(state, id) => state.cart,
(state, id) => id,
(cart, id) => cart.ids.includes(id)
);