react-redux update item in array doesn't re-render

Question

I have a reducer which returns an object with an array in the object. I render the list of items in the array and when the user clicks on that item I want to re-render the array (or at least the item). I've created a jsbin that shows the problem:

https://jsbin.com/fadudeyaru/1/edit?js,console,output

To reproduce the issue, click the + or - button a few times to create a history. then click on one of the history items. you'll notice that the console log notices the event, and updates the state, but the list is not re-rendered. This can be verified by clicking the +/- button again after clicking on an item in the list. after that you'll see that it renders correctly.

Question is why does react-redux not cause this to be re-rendered? is there something I need to do to force the issue?

Thanks in advance.

IIRC, returning an object from a reducer does only a shallow copy... perhaps the array isn't getting updated? — Kryten
– Kryten, Commented Sep 23, 2016 at 19:02
no, it is getting updated... you can see this in both the console.log output as well as by selecting a few history items and then clicking the + or - button... — Ben
– Ben, Commented Sep 23, 2016 at 20:46

Ben · Accepted Answer · 2016-09-25 22:53:23Z

6

State in redux is immutable. This means that reducer should create a new state for every mutation. Preferably, a deep clone should be done when arrays are present. The following code does an approximate deep clone for your code to work. Try utilities like lodash/deepClone for an easier solution.

const counter = (state = {count:0, history:[]}, action) => {
  let {count} = state;
  let history = [...state.history];

  switch (action.type) {
    case 'SELECT':
      history[action.i].selected = true;
      break;
    case 'INCREMENT':
      history.push({count,selected:false});
      count++;

      break;
    case 'DECREMENT':
      history.push({count,selected:false});
      count--;
      break;
    default:
      break;
  }
    console.log("count reducer: ", {count,history})
  return {count,history};
}

edited Sep 25, 2016 at 22:53

Ben

16.6k24 gold badges83 silver badges122 bronze badges

answered Sep 23, 2016 at 19:06

vijayst

22.1k18 gold badges73 silver badges113 bronze badges

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

1 Comment

vijayst Over a year ago

@Ben I have updated the code. This one works. Better to use lodash/deepClone to work on the cloned object.

Collectives™ on Stack Overflow

react-redux update item in array doesn't re-render

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related