Update cart item number instead of appending new item - react-native

Question

If an already added product is again added to the cart then only cart number should increase but the function appends the data to the list and the product gets duplicate in the cart view. How to make sure check if the product already exists then only increment or decrement the count.
below is the code to update product
const initialState = {
cart: [],
total: 0,
}
const cartItems = (state = initialState, action) => {
switch(action.type) {
case 'ADD_TO_CART':
return {
...state,
cart: [action.payload, ...state.cart],
total: state.total + 1
}
// return [...state,action.payload]
case 'REMOVE_FROM_CART' :
return state.filter(cartItems => cartItems.id !== action.payload.id)
}
return state
}
A single item from the data will be like
{key:'1', type:"EARRINGS", pic:require('../../assets/earring.jpg'),price:"200"}

Answer 1

If you are using the same key for the items you can do like below
case 'ADD_TO_CART':
{
const updatedCart = [...state.cart];
const item = updatedCart.find(x=>x.key===action.payload.key);
if(item)
{
item.count++;
}
else{
updatedCart.push(action.payload);
}
return {
...state,
cart: updatedCart,
total: state.total + 1
}
}
The logic would search for items in the array and increase the count or add a new item to the array.

Answer 2

I think this will work.
case UPDATE_CART:
let receivedItem = action.payload
let itemList = state.cart
let stepToUpdate = itemList.findIndex(el => el.id === receivedItem.id);
itemList[stepToUpdate] = { ... itemList[stepToUpdate], key: receivedItem };
return { ...state, cart: itemList }
'id' is a unique thing to update specific item present in your cart. It cab be product id or some other id.
itemList.findIndex(el => el.id === receivedItem.id);

Answer 3

There are different ways of achieving this. You can create actions to INCREMENT/DECREMENT in case you know the product is added (eg: on the cart summary).
And you can also let this behaviour inside the ADD_TO_CART action if you don't know whether the product is added or not:
case "ADD_TO_CART": {
const isProductAdded = state.cart.find(
item => action.payload.id === item.id
);
return {
...state,
cart: isProductAdded
? state.cart.map(item => {
if (item.id === action.payload.id) {
item.qty++;
}
return item;
})
: [action.payload, ...state.cart],
total: state.total + 1
};
}