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商店中的状态发生了变化，我可以看到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）{
返回{
类型：ADD_TRANSACTION，
有效负载：{
交易：交易，
余额：余额，
账户：账户
}
}
}

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

我的减速机......

My reducer...

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商店更新时更新。

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

Github repo： https://github.com/curiousercreative/bankDemo
部署： http：// curiousercreative .com / demos / bankDemo /

Github repo: https://github.com/curiousercreative/bankDemo Deployment: http://curiousercreative.com/demos/bankDemo/

ps我撒谎没有任何错误。我确实有一些警告警告：数组或迭代器中的每个子项应该有一个唯一的关键道具......我已经给它们一个关键的道具设置它的索引。我怀疑它有什么尽管如此。

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..." 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 Comparison中的购物卡示例，因为它展示了如何更新嵌套对象而不会以类似于你的方式改变它们正在询问。

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屋！