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.

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.

• javascript
• reactjs
• redux

2 Answers 2

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.

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