Increment value of array of objects redux

Question

I need to increment quantity of item in cart if item already exists in the state array. In the reducer I got it to work but it needs to be immutable. Because of this, my component doesnt update properly.

This is the code for my reducer:

import { ADD_TO_CART, REMOVE_FROM_CART } from '../actions/types';

const initialState = [];

//Cannot mutate array in reducer 

export default function(state = initialState, action){
    const { type, payload } = action;

    switch(type){
        case ADD_TO_CART:
            const newState = [...state]
            for(var i = 0; i < newState.length; i++){
                if(newState[i].item.uid === payload.item.uid){
                    newState[i].item.qty ++;
                    return [...newState];
                }
            }
            return [...state, payload];
        case REMOVE_FROM_CART:
            for(var j = 0; j < state.length; j++){
                    if(state[j].item.uid === payload.uid){
                        state[j].item.qty = 1;
                    }
            }
            return state.filter(cartItem => cartItem.item.uid !== payload.uid);

        default:
            return state;
    }
}

I need to increment qty if item is already in the array.

Drew Reese · Accepted Answer · 2020-05-31 21:24:13Z

1

The issue I see is with newState[i].item.qty++;, that although you shallowly copied the array, the elements in the array still represent those of the previous state, so post incrementing it mutates the object.

To resolve this issue you should also copy each item into a new object, then update the new object reference.

The following also include a minor optimization to iterate the data once versus twice, by checking for the matching item ID as it copying the state into a new array.

let itemExists = false;
const newState = state.map(item => {
  const newItem = { ...item };
  if (newItem.item.uid === payload.item.uid) {
    itemExists = true;
    newItem.item.qty = item.qty + 1;
  }
  return newItem;
});

if (!itemExists) newState.push(payload);

return newState;

EDIT: Alternative method

const itemIndex = state.findIndex(item => item.item.id === payload.item.id);
if (itemIndex !== -1) {
  return state.map((item, i) => ({
    ...item,
    item: {
      ...item.item,
      qty: item.item.qty + (itemIndex === i ? 1 : 0),
    }
  }));
} else {
  return [...state, payload];
}

edited May 31, 2020 at 21:24

answered May 31, 2020 at 0:55

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

chrus54321 Over a year ago

Almost got it but unfortunately i ran redux immutable state invariant and it gave an error: A state mutation was detected inside a dispatch, in the path: cart.0.item.qty. Take a look at the reducer(s) handling the action {"type":"ADD_TO_CART","payload":{"item":{"name":"hamburger","price":12,"category":"dinner","qty":2,"uid":"d23ff8-4056-38b6-7e3-41ec8e01871"}}}.

Drew Reese Over a year ago

@chrus54321 Updated answer, try newItem.qty = item.qty + 1; it's a more common pattern anyway and shouldn't mutate any old references. If that doesn't work then I have another idea.

Drew Reese Over a year ago

@chrus54321 Ok, one thing I just noticed is your state array elements use a nested item key, so my first answer may have missed this and maybe that is the mutation your testing picked up on. I've updated it and added the alternative method I was thinking of.

Collectives™ on Stack Overflow

Increment value of array of objects redux

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related