React-redux存储更新,但是React没有

React-redux store updates but React does not

本文关键字:React 没有 但是 存储 更新 React-redux      更新时间:2023-09-26

请原谅我,因为这个问题与我使用React, Redux或React - Redux的第一个测试应用程序有关。医生帮了我很大的忙,我有一个模拟银行应用程序,基本上还能用。我的状态对象大致如下:

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

我只有两个动作:

1。 CHANGE_HASH (url hash)。这个动作总是按预期工作,所有的减速器只是更新状态。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 action, React将赶上并正确显示所有ADD_TRANSACTION状态更新。

function addTransaction(transaction, balance, account) {
    return {
        type: "ADD_TRANSACTION",
        payload: {
            transaction: transaction,
            balance: balance,
            account: account
        }
    }
}

我的减速机…

    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 store的更新而更新。

Github回购:

部署库演示

注。我谎称没有任何错误。我有一些警告

"警告:数组或迭代器中的每一个子元素都应该有一个唯一的"key" prop…"

我已经给他们一个键prop设置为它的索引。我怀疑这和我的问题有任何关系。

问题出在这段代码中:

// 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的"故障排除"文档中有详细的描述,所以我建议你阅读它们。

https://redux.js.org/troubleshooting

我还建议你看看Redux的Flux Comparison中的Shopping Card示例,因为它展示了如何更新嵌套对象而不会像你所要求的那样改变它们。

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