Redux : update an item in an array of objects

Question

In my reducer called 'reducer_product_list', I have this array :

let initialState = [
    {name: 'Article 1', price: 5, quantity: 10},
    {name: 'Article 2', price: 15, quantity: 8},
    {name: 'Article 3', price: 7, quantity: 15},
    {name: 'Article 4', price: 9, quantity: 5},
    {name: 'Article 5', price: 11, quantity: 100},
    {name: 'Article 6', price: 23, quantity: 20},
  ]

When I get the action 'ADD_TO_CART', I want to decrease the quantity of the selected object. The payload is one of those objects.

I typed the code above :

export default (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TO_CART':
      initialState.map((product, i) => {
        if (product.name === action.payload.name) {
          initialState[i].quantity -= 1
          return state;
        }
      });
    default: return state
  }
}

If I console.log my initialState, the quantity is decreasing, but in my container that renders the view, the quantity stays the same.

Thank you for your help.

Florian Fankhauser · Accepted Answer · 2018-09-24 11:39:29Z

19

Try this:

export default (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TO_CART':
      return state.map(product => {
        if (product.name === action.payload.name) {
          return {...product, quantity: product.quantity-1}
        };
        return product;
      });
    default: return state
  }
}

The reason is you have to return a new state object derived from the current state reflecting the desired changes according to the requested action. See Redux Reducers for more details.

edited Sep 24, 2018 at 11:39

Florian Fankhauser

3,6752 gold badges28 silver badges30 bronze badges

answered Sep 24, 2018 at 10:31

Tu Nguyen

10.2k4 gold badges30 silver badges53 bronze badges

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

2 Comments

cyrilb Over a year ago

Thank you for you help, it works well! I just had to change one thing: instead of mapping on the initialState, I mapped on the state.

Vasanth Over a year ago

You need to spread the state right ? otherwise previous state will be lost right ? ideally we should never the change the redux state

cyrilb · Accepted Answer · 2018-09-24 12:32:36Z

0

Thank you for you help, it works well! I just had to change one thing: instead of mapping on the initialState, I mapped on the state.

export default (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TO_CART':
      return state.map(product => {
        if (product.name === action.payload.name) {
          return {...product, quantity: product.quantity - 1}
        };
        console.log(state)
        return product;
      });
    default: return state
  }
}

answered Sep 24, 2018 at 12:32

cyrilb

1071 gold badge1 silver badge5 bronze badges

Collectives™ on Stack Overflow

Redux : update an item in an array of objects

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related