update state in useReducer() - reactjs

Question

first of all I have to mention that i'm a bit new to react but I've spent couple of hours on a problem with useReducer and couldn't understand it . here is my code:
const defaultCartState = {
items: [],
totalAmount: 0,
};
//action = {type:"ADD" , item:item}
const cartReducer = (state, action) => {
if (action.type === "ADD") {
const updatedTotalAmount = parseFloat(
state.totalAmount + action.item.price * action.item.amount
).toFixed(2);
const existingCartItemIndex = state.items.findIndex(
(item) => item.id === action.item.id
);
const existingCartItem = state.items[existingCartItemIndex];
let updatedItems;
if (existingCartItem) {
const updatedItem = state.items[existingCartItemIndex];
updatedItem.amount =
state.items[existingCartItemIndex].amount + action.item.amount;
const updatedItems = [...state.items];
updatedItems[existingCartItemIndex] = updatedItem;
return {
items: updatedItems,
totalAmount: updatedTotalAmount,
};
} else {
const updatedItems = state.items.concat(action.item);
return {
items: updatedItems,
totalAmount: updatedTotalAmount,
};
}
}
return defaultCartState;
};
its simply my reducer function state include an array named items which each element of this array is an object with a amount value. and here is my useReducer initialization:
const [cartState, dispatchCartAction] = useReducer(cartReducer,defaultCartState);
my problem is with these two lines of code :
if (existingCartItem) {
const updatedItem = state.items[existingCartItemIndex];
updatedItem.amount =
state.items[existingCartItemIndex].amount + action.item.amount;
if I swap these two lines of code with these everything works fine .
if (existingCartItem) {
const updatedItem = {
...existingCartItem,
amount: existingCartItem.amount + action.item.amount,
};
I want to know what is the problem ? why my approach doesn't work? what is the difference between defining an item like my solution and the real solution ?
thank you in advance

Answer 1

As reducers are pure functions you cannot mutate state directly. That is why the second method is working. You need to copy the previous state and then and create a new object every time.
I think this may help more (if I understood the question correctly);