数组中的react-redux更新项目不会重新呈现

Question

我有一个reducer，它返回一个带有对象数组的对象。我渲染数组中的项目列表，当用户点击该项目时，我想重新渲染数组（或至少是项目）。我创建了一个显示问题的jsbin：

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

要重现此问题，请单击+或 - 按钮几次以创建历史记录。然后单击其中一个历史记录项。您会注意到控制台日志会通知事件，并更新状态，但不会重新呈现列表。 点击列表中的项目后，再次单击+/-按钮可以验证这一点。之后，您会看到它正确呈现。

问题是为什么react-redux不会导致重新渲染？我有什么需要做的来强迫这个问题吗？

提前致谢。

Answer 1

redux中的状态是不可变的。这意味着reducer应该为每个突变创建一个新状态。优选地，当存在阵列时应该进行深度克隆。以下代码为您的代码执行近似深层克隆。尝试使用lodash / deepClone等实用程序来获得更简单的解决方案。

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