问题:

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.

回答1:

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

转载请标明出处:react-redux update item in array doesn't re-render

文章来源: react-redux update item in array doesn't re-render

标签

update

array

history