Updating product quantity in Redux shopping cart

Question

I'm asking for help as I'm new to react and javascript. There are similar solutions to my problem but I still can't get it working. I'm trying to create a redux store with an option to be able to update quantity in the shopping cart.

This is my store

const cartSlice = createSlice({
  name: "cart",
  initialState: {
    products: [],
    quantity: 0,
  },
  reducers: {
    addProduct: (state, { payload }) => {
      const product = state.products.find(
        (product) => product.id === payload.id
      );
       if (product) {
        state = state.products.map((product) =>
          product.id === payload.id
            ? {
                ...product,
                quantity: (product.quantity += payload.quantity),
              }
            : product
        );
      } else {
        state.products.push(payload);
        state.quantity += 1;
      }
    },
    incQuantity: (state, { payload }) => {
      const product = state.products.find((product) => product.id === payload);
      product.quantity++;
    },
    decQuantity: (state, { payload }) => {
      const product = state.products.find((product) => product.id === payload);
      if (product.quantity === 1) {
        const index = state.products.findIndex(
          (product) => product.id === payload
        );
        state.products.splice(index, 1);
      } else {
        product.quantity--;
      }
    },
    removeProduct: (state, { payload }) => {
      const index = state.products.findIndex(
        (product) => product.id === payload
      );
      state.products.splice(index, 1);
    },
  },
});

export const { addProduct, incQuantity, decQuantity, removeProduct } =
  cartSlice.actions;

export default cartSlice.reducer;

This is how I update quantity on the product page where you can add a product to the cart

const handleQuantity = (type) => {
  if (type === "dec") {
    quantity > 1 && setQuantity(quantity - 1);
  } else {
    setQuantity(quantity + 1);
  }
};

<Remove onClick={() => handleQuantity("dec")} />
<span className="product-detail-amount">{quantity}</span>
<Add onClick={() => handleQuantity("inc")} />

<button className="product-detail-button"
onClick={() => dispatch(addProduct({ ...product, quantity }))}>
Add to Cart </button>

<Remove
  onClick={() => dispatch(decQuantity(product.id))}/>
  <span className="product-detail-amount">
  {product.quantity}</span>
 <Add
  onClick={() => dispatch(incQuantity(product.id))}/>

What it does now it keeps adding quantity to the same product without displaying a new one, same issues with updating the quantity (it changes the quantity only for the first product and when it's gone it starts updating another one)

Your help is much appreciated!

Answer 1

I think the problem is in the incQuantity and decQuantity reducers where you comparing product id to whole payload.

Should't have been payload.id? Like this

incQuantity: (state, { payload }) => {
      const product = state.products.find((product) => product.id === payload.id);
      product.quantity++;
},

Answer 2

I don't believe that product.quantity++ is updating the state, it's just updating the local variable inside the reducer.

I'm wing it pretty hard, but will this work?

incQuantity: (state, { payload }) => {
  state.products[state.products.findIndex(el => el.id === payload)].quantity = payload;
},

Edit:

Got a little lost. I believe you want it to increment by 1: ++

state.products[state.products.findIndex(el => el.id === payload)].quantity++

Answer 3

I got what was the issue, the original code works, should've used _id instead of id (I'm pulling data from mongodb where id has an underscore, I think this caused the problem). Thanks everyone who replied!