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