React Reducer function to return array of objects

Question

If I have an array of objects representing say a shopping cart (in React)

[ { id: 1, qty: 1 } ]

what would be a neat way of adding an item to this state ?

I would need to check if the array contains an object with that id, if it did then update it's quantity, if not then just create a new array element adding this new object.

I am getting myself in a mess trying to write this with new ES6 syntax in a functional style ... this is what I have so far ...

let initialState = []

  export default function shoppingCart(state=initialState, action) {
    switch(action.type) {
        case 'ADD_TO_CART':
            // check the array of objects and only act on the one we are interested in 
            let newQty = action.payload.qty
            console.log("state : ", state)
            for(let i = 0; i < state.length; i++) {
               if (state[i].id === action.payload.id) {
                   newQty = state[i].qty + action.payload.qty
                   console.log("QTY : " + newQty)
               }
           }
           //Obviously this will not work if the {id ...} already exists
           return [ ... state, {id:action.payload.id, qty:newQty} ] // todo: update this to contain the payload with qty included

       case 'REMOVE_FROM_CART':
           return state.filter(elem => elem.id !== action.payload.id)
       default:
           return state
   }
}

dfsq · Accepted Answer · 2016-12-16 15:09:36Z

1

You can use Array.prototype.splice to replace array item with another one:

case 'ADD_TO_CART':
  const index = state.findIndex(item => item.id === action.payload.id)
  if (index > -1) {
    state.splice(index, 1, {
      id: action.payload.id,
      qty: state[index].qty + action.payload.qty
    })
    return [...state]
  }
  else {
    return [...state, {
      id: action.payload.id,
      qty: newQty
    }]
  }

answered Dec 16, 2016 at 15:09

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

4 Comments

avrono Over a year ago

The paradigm is for the Array to be immutable

avrono Over a year ago

I guess I can slice () first

dfsq Over a year ago

It is immutable there. [...state] is a new array.

avrono Over a year ago

that's it. Makes sense. Tks !

Collectives™ on Stack Overflow

React Reducer function to return array of objects

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related