Adding/Removing from array doesnt trigger rerender via redux

Question

I am currently having an issue adding/reducing to an array via redux. Just to make sure my redux state works, i hard coded values in and it triggers every time i press a button.

Code that works:

import * as actionType from '../actions/ActionType';

const counterReducer = (state = [], action) => {
  let newState = [];
  switch (action.type) {
    case actionType.ADD_FILTER:
      if (!state.includes(action.payload)) {
        return newState = ['test'];
      }
      return newState = ['test'];
    default:
      return state;
  }
};

export default counterReducer;

Code that doesnt trigger a rerender:

import * as actionType from '../actions/ActionType';

const counterReducer = (state = [], action) => {
  let newState = [];
  switch (action.type) {
    case actionType.ADD_FILTER:
      if (!state.includes(action.payload)) {
        const current = state;
        current.push(action.payload);
        return newState = current;
      }
      return newState = state;
    default:
      return state;
  }
};

export default counterReducer;

The redux store however updates? Help?

What do you get when you do console.log(action.payload)? I think you must be getting undefined — Hemadri Dasari
– Hemadri Dasari, Commented Nov 2, 2018 at 11:25
@Think-Twice i get the value of the button. So for example, if button is called 'Arriving Today', action.payload would be a string 'Arriving Today' — Raziel
– Raziel, Commented Nov 2, 2018 at 11:26
this, I think should work. Can you make a quick stakcblitz version of this and paste the link here? — AkshayM
– AkshayM, Commented Nov 2, 2018 at 11:31

anurag145 · Accepted Answer · 2018-11-02 11:37:48Z

1

The code that doesn't work, the reason for that is you are mutating your state(using push method on an array which has reference to the old state), which redux will not register as a change because you are again passing the reference of the old state. Read on cloning arrays and slice method.

const current =state.slice();
current.push(action.payload)
return current

Now that you have a proper clone, return that array. That would trigger re-render.

Also, the first case works because you are always creating a new array and its reference.

answered Nov 2, 2018 at 11:37

anurag145

1551 silver badge14 bronze badges

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

Collectives™ on Stack Overflow

Adding/Removing from array doesnt trigger rerender via redux

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related