React-redux商店更新但React不是

Question

忍受我在这里，因为这个问题涉及我的第一个测试应用程序使用React，Redux或react-redux。 Docs让我走得很远，我有一个模拟银行应用程序，主要工作。我的状态对象看起来大致是这样的：

{ 
activePageId: "checking", 
accounts: [ 
    checking: { 
    balance: 123, 
    transactions: [ 
     {date, amount, description, balance} 
    ] 
    } 
] 
} 

我只有两个动作：

CHANGE_HASH（如URL哈希）。这个动作总是按预期工作，所有reducer所做的就是更新state.activePageId（是的，我克隆了状态对象而不是修改它）。行动之后，我可以看到Redux商店中的状态发生了变化，我可以看到React已更新。

function changeHash(id) { 
     return { 
      type: "CHANGE_HASH", 
      id: id 
     } 
} 

2. ADD_TRANSACTION（表单提交）。此操作从不更新React，但始终更新Redux存储。此操作的缩减器正在更新state.accounts [0] .balance，并将事务对象添加到数组state.accounts [0] .transactions。我没有收到任何错误，React只是不更新​​。但是，如果我发送CHANGE_HASH动作，React将会赶上并正确显示所有ADD_TRANSACTION状态更新。

功能addTransaction（事务，平衡，帐户）{ 返回{ 类型： “ADD_TRANSACTION”， 有效载荷：{ 事务：交易， 平衡：平衡， 帐户：帐户 } } }

我用减速机

function bankApp(state, action) { 
    switch(action.type) { 
     case "CHANGE_HASH": 
      return Object.assign({}, state, { 
       activePageId: action.id 
      }); 
     case "ADD_TRANSACTION": 
     // get a ref to the account 
      for (var i = 0; i < state.accounts.length; i++) { 
       if (state.accounts[i].name == action.payload.account) { 
        var accountIndex = i; 
        break; 
       } 
      } 

     // is something wrong? 
      if (accountIndex == undefined) { 
       console.error("could not determine account for transaction"); 
       return state; 
      } 

     // clone the state 
      var newState = Object.assign({}, state); 

     // add the new transaction 
      newState.accounts[accountIndex].transactions.unshift(action.payload.transaction); 

     // update account balance 
      newState.accounts[accountIndex].balance = action.payload.balance; 

      return newState; 
     default: 
      return state; 
    } 

我mapStateToProps

function select(state) { 
    return state; 
} 

我在这里错过了什么？我感觉React应该在Redux商店更新时更新。

Github上回购：https://github.com/curiousercreative/bankDemo 部署：http://curiousercreative.com/demos/bankDemo/

附：我撒谎没有任何错误。我有一些警告“”警告：数组或迭代器中的每个孩子都应该有一个唯一的“键”prop ......“我已经给他们一个关键的道具来设置它的索引，我怀疑它有什么做我的问题虽然

Answer 1

的问题是在这一段代码：。

 // clone the state 
      var newState = Object.assign({}, state); 

     // add the new transaction 
      newState.accounts[accountIndex].transactions.unshift(action.payload.transaction); 

     // update account balance 
      newState.accounts[accountIndex].balance = action.payload.balance; 

克隆的状态对象并不意味着你可以变异它是指对象，我建议你阅读更多关于不变性，因为这不是它的工作方式

这个问题和解决方案在Redux“Troubleshooting”文档中有详细描述，所以我建议您阅读它们。

https://redux.js.org/troubleshooting

我也建议你采取流量的比较终极版一看购物卡的例子，因为它说明如何在不以类似的方式变异他们你所要求的更新嵌套的对象。

https://github.com/voronianski/flux-comparison/tree/master/redux