Not displaying quantity of object in my product cart on UI - react-redux

Question

I am using API of a fake store, so when I add a product to my cart I need to update the quantity of this product in the cart and update the quantity on UI. The problem is that product quantity is updating in global state, but not updating on UI. Could you please give any advice on that? Thank you in advance !
const reducer = (state = initialState, action) => {
switch (action.type) {
case "ADD_TO_CART":
const newItem = action.payload;
const exist = state.products.find((item) => item.id === newItem.id);
if (exist) {
exist.qty += 1;
return {
...state,
quantity: state.quantity + 1,
};
} else {
newItem.qty = 1;
return {
...state,
products: state.products.concat(newItem),
};
}
}
};

Answer 1

A reducer function should always return the new state, not mutate the existing one. When you do exist.qty += 1, you are mutating the state. Also, in the if block, you are adding a new property in your state when you do quantity: state.quantity + 1,.
Assuming each product at least has these properties: id and quantity, this should work:
const reducer = (state = initialState, action) => {
switch (action.type) {
case "ADD_TO_CART":
const newItem = action.payload;
// Clone existing products array
let updatedProducts = [...state.products];
// Find the index of the product you want to add
const existingIndex = updatedProducts.find((item) => item.id === newItem.id);
// If the product exists (it will have an index of > -1)
if (existingIndex > -1) {
// Increase its quantity
const updatedProduct = { ...updatedProducts[index], quantity: ++updatedProducts[index].quantity };
// Update the item in the array
updatedProducts.splice(existingIndex, 1, updatedProduct);
} else {
// Product was not found in products - so add it at the end, with quantity set to 1
updatedProducts = [...updatedProducts, { ...action.payload, quantity: 1 }];
}
// Return the state
return { products: updatedProducts };
}
};