I am making this shopping cart in redux-toolkit and rtk query. I want to change the cartItem index with product id.
I think the problem is with this line of code:
const cartItems = state.cartItems
My full code:
import { createSlice, current } from '@reduxjs/toolkit';
const initialState = {
cartItems: [],
};
export const cartSlice = createSlice({
name: 'cartSlice',
initialState: initialState,
reducers: {
setToCart: (state, action) => {
const { payload:product, newQty = 1 } = action;
const cartItems = state.cartItems;
const quantity = cartItems?.[product?._id]
? parseInt(cartItems[product._id].quantity newQty)
: 1;
cartItems[product._id] = {
...product,
quantity,
};
return {
...state,
cartItems: cartItems
}
},
},
});
export const {setToCart} = cartSlice.actions;
export default cartSlice.reducer;
Here is action.payload
:
{
img: "_OCT2HGtyHbioAuVTMGcA-mauntain.jpg",
name: "iphone",
price: 600001,
_id: "60d375ed3224711bc0f3538a"*
}
CodePudding user response:
As the error states, when using an Immer-powered reducer you must Either return a new value or modify the draft.
You are modifying the cartItems
array. You do not need to return anything from your reducer. Just modify the values that you want to change. That's the magic of Redux Toolkit! (powered by Immer).
There are some other issues with your reducer:
action
will not have a propertynewQty
. It will only have atype
andpayload
. PerhapsnewQty
is a property of thepayload
?- It seems like
cartItems
is a dictionary keyed by_id
, but you initialize it as an empty array[]
instead of an empty object{}
. parseInt
doesn't make sense outside of an addition statement.parseInt("2" "2")
will be22
, not4
.
A "fixed" version might look like this, depending on how you structure your payload:
import { createSlice } from '@reduxjs/toolkit';
const initialState = {
cartItems: {},
};
export const cartSlice = createSlice({
name: 'cartSlice',
initialState: initialState,
reducers: {
setToCart: (state, action) => {
const { payload } = action;
const { product, newQty = 1 } = payload;
const cartItems = state.cartItems;
// If already in cart, increase quantity.
if (cartItems[product._id]) {
cartItems[product._id].quantity = newQty;
}
// Otherwise add to cart.
else {
cartItems[product._id] = {
...product,
quantity: newQty
}
}
// Don't return anything.
},
},
});
export const {setToCart} = cartSlice.actions;
export default cartSlice.reducer;