React Redux: how to update the product quantity in a shopping cart

Question

I have a store in Redux. There are two arrays, womanProducts and cartProducts:

const defaultState = {
  womanProducts:
    [
       {name: "Mini Skirt", img: "https://static.pullandbear.net/2/photos//2022/I/0/1/p/8399/316/800/8399316800_4_1_8.jpg?t=1656932863233&imwidth=563", price: 35, inCart: 1, id: 1},
       {name: "Basic Jeans", img: "https://static.pullandbear.net/2/photos//2022/I/0/1/p/8685/326/400/8685326400_4_1_8.jpg?t=1657798996961&imwidth=563", price: 39, inCart: 1, id: 2},
       {name: "Fit Dress", img: "https://static.pullandbear.net/2/photos//2022/V/0/1/p/4390/422/611/4390422611_4_1_8.jpg?t=1643722977148&imwidth=563", price: 45, inCart: 1, id: 3},
       {name: "Basic Sweatshirt", img: "https://static.pullandbear.net/2/photos//2021/I/0/1/p/8393/363/485/8393363485_4_1_8.jpg?t=1634212398331&imwidth=563", price: 29, inCart: 1, id: 4}
    ],
 cartProducts: [],
}

Then I dispatch cartProducts and add women products to the shopping cart (Case "ADD_PRODUCTS" to add products in cart and "REMOVE_FROM_CART" to remove items from cart). It's working well, but "INCREMENT_PRODUCT" is not working:

const reducer = (state = defaultState, action) => {
   switch(action.type) {
      case "ADD_PRODUCTS":
         return {...state, cartProducts: [...state.cartProducts, action.payload]}
      case "REMOVE_FROM_CART":
         return {...state, cartProducts: state.cartProducts.filter((event) => event.id !== action.payload)}

      case "INCREMENT_PRODUCT":
         return {
            ...state,
            cartProducts: state.cartProducts.map((item) => item.inCart + action.payload)}

      default:
        return state
}

But now I need to increment and decrement products in the cart by clicking a button.

Cart Component:

return(
    <div className="cart">
        {cartProducts.length > 0 ? cartProducts.map(item =>
            <div className="cartItem" key={item.id}>
                <img src={item.img} />
                <div className="cartItemInfo">
                    <div className="itemInfo">
                        <h3>{item.name}</h3>
                        <h3>{item.price}$</h3>
                    </div>
                    <div className="quantity">
                        <button onClick={() => decrementProduct()}>-</button>
                        <p>{item.inCart}</p>
                        <button onClick={() => incrementProduct()}>+</button>
                    </div>
                    <div className="itemDelete">
                        <button onClick={() => removeItem(item.id)}><img src={require('../images/icons/trashCanIcon.png')} /></button>
                    </div>
                </div>
            </div>
        ): <h1>Cart is empty</h1>}
        {cartProducts.length > 0 ? <h1 className="totalPrice">Total Price: {totalPrice}$</h1> : <></>}
    </div>
)

And the function to increment the product:

function incrementProduct() {
   dispatch({type: "INCREMENT_PRODUCT", payload: 1})
}

Answer 1

First you should change your payload. It needs item id to determine which item you are incrementing

dispatch({type: "INCREMENT_PRODUCT", payload: {id: 1, increment: 1}})

Now, You can map the cart products; if item id is same with cart item id then increment or just return the item

case "INCREMENT_PRODUCT":
            return {
                ...state,
                cartProducts: state.cartProducts.map((item) => {
                    if(item.id === action.payload.id) {
                        item.inCart += action.payload.increment;
                    }
                    return item;
                })
            }