React-redux 存储更新但 React 没有 [英] React-redux store updates but React does not

问题描述

请耐心等待，因为这个问题与我使用 React、Redux 或 react-redux 的第一个测试应用程序有关.文档让我走得更远，我有一个模拟银行应用程序，它几乎可以正常工作.我的状态对象大致如下所示:

Bear with me here as this question pertains to my first test app using either React, Redux or react-redux. Docs have gotten me far and I have a mock banking app that mostly works. My state object looks roughly like this:

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

我只有两个动作:

1. CHANGE_HASH(如在 url 哈希中).此操作始终按预期工作，reducer 所做的只是更新 state.activePageId(是的，我正在克隆状态对象而不是修改它).操作后，我可以看到 Redux store 中的 state 发生了变化，并且我可以看到 React 已经更新.

1. CHANGE_HASH (as in url hash). This action always works as expected and all the reducer does is update the state.activePageId (yes, I'm cloning the state object and not modifying it). After the action, I can see the state has changed in the Redux store and I can see that React has updated.

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

2. ADD_TRANSACTION(表单提交).这个动作永远不会更新 React，但它总是更新 Redux 存储.此操作的reducer 正在更新state.accounts[0].balance，并将交易对象添加到数组state.accounts[0].transactions.我没有收到任何错误，React 只是没有更新.但是，如果我发送一个 CHANGE_HASH 操作 React 将赶上并正确显示所有 ADD_TRANSACTION 状态更新.

2. ADD_TRANSACTION (form submission). This action never updates React, but it always updates the Redux store. The reducer for this action is updating state.accounts[0].balance and it's adding a transaction object to the array state.accounts[0].transactions. I don't receive any errors, React just doesn't update. HOWEVER, if I dispatch a CHANGE_HASH action React will catch up and display all of the ADD_TRANSACTION state updates properly.

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

My mapStateToProps

    function select(state) {
        return state;
    }

我在这里错过了什么?我的印象是 React 应该随着 Redux store 的更新而更新.

What am I missing here? I'm under the impression that React is supposed to update as the Redux storeis updated.

Github 存储库:

部署银行演示

附言我谎称没有任何错误.我确实有很多警告

p.s. I lied about not having any errors. I do have a number of warnings

""警告:数组或迭代器中的每个子项都应该有一个唯一的键"属性..."

""Warning: Each child in an array or iterator should have a unique "key" prop..."

我已经给他们一个键 prop 设置为它的索引.不过，我怀疑这与我的问题有关.

I'm already giving them a key prop set to it's index. I doubt that has anything to do with my issue though.

推荐答案

问题出在这段代码:

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

克隆状态对象并不意味着您可以改变它所指的对象.我建议你阅读更多关于不变性的内容，因为它不是这样工作的.

Cloning the state object doesn't mean you can mutate the objects it is referring to. I suggest you to read more about immutability because this isn't how it works.

这个问题及其解决方案在 Redux疑难解答"文档中有详细描述，所以我建议你阅读它们.

This problem and solution to it are described in detail in Redux "Troubleshooting" docs so I suggest you to read them.

https://redux.js.org/troubleshooting

我还建议您查看 Redux 的 Flux 比较中的购物卡示例，因为它显示了如何更新嵌套对象，而不会以与您要求的类似的方式对其进行变异.

I also suggest you to take a look at Shopping Card example in Flux Comparison for Redux because it shows how to update nested objects without mutating them in a similar way to what you are asking.

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

这篇关于React-redux 存储更新但 React 没有的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！