CODEWITHSUNDEEP
react-nativereduxcart
Lovepreet Singh
Lovepreet Singh

Reputation: 390

Update cart item number instead of appending new item

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"}

Upvotes: 0

Views: 782

Answers (3)

Diogo Lessa
Diogo Lessa

Reputation: 177

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
   };
}

Upvotes: 1

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16334

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.

Upvotes: 2

Tushar Pandey
Tushar Pandey

Reputation: 4857

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);

Upvotes: 1

Related Questions