I have a store in redux. There is 2 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 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” 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 prodcuts in cart by clicking 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 function to increment product
function incrementProduct() { dispatch({type: "INCREMENT_PRODUCT", payload: 1}) }
Advertisement
Answer
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; }) }