Javascript React-redux 存储更新但 React 没有
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33140008/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React-redux store updates but React does not
提问by curiouser
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:
请耐心等待，因为这个问题与我使用 React、Redux 或 react-redux 的第一个测试应用程序有关。文档让我走得更远，我有一个模拟银行应用程序，它大部分都有效。我的状态对象大致如下所示：
{
activePageId: "checking",
accounts: [
checking: {
balance: 123,
transactions: [
{date, amount, description, balance}
]
}
]
}
I have just two actions:
我只有两个动作：
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.
1.CHANGE_HASH（如在 url 哈希中）。此操作始终按预期工作，reducer 所做的只是更新 state.activePageId（是的，我正在克隆状态对象而不是修改它）。操作后，我可以看到 Redux 存储中的状态已更改，并且我可以看到 React 已更新。
function changeHash(id) {
return {
type: "CHANGE_HASH",
id: id
}
}
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].balanceand 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 actionReact will catch up and display all of the ADD_TRANSACTIONstate updates properly.
2.ADD_TRANSACTION（表单提交）。这个动作永远不会更新 React，但它总是更新 Redux 存储。此操作的reducer 正在更新state.accounts[0].balance，并将事务对象添加到数组state.accounts[0].transactions。我没有收到任何错误，React 只是没有更新。但是，如果我调度CHANGE_HASH actionReact 将赶上并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;
}
My mapStateToProps
我的 mapStateToProps
function select(state) {
return state;
}
What am I missing here? I'm under the impression that React is supposed to update as the Redux storeis updated.
我在这里缺少什么？我的印象是 React 应该随着Redux store更新而更新。
p.s. I lied about not having any errors. I do have a number of warnings
ps我谎称没有任何错误。我确实有很多警告
""Warning: Each child in an array or iterator should have a unique "key" prop..."
""警告：数组或迭代器中的每个子项都应该有一个唯一的“键”属性..."
I'm already giving them a key propset to it's index. I doubt that has anything to do with my issue though.
我已经给他们prop设置了一个索引键。我怀疑这与我的问题有什么关系。
回答by Dan Abramov
The problem is in this piece of code:
问题出在这段代码中：
// 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.
克隆状态对象并不意味着您可以改变它所指的对象。我建议你阅读更多关于不变性的内容，因为这不是它的工作原理。
This problem and solution to it are described in detail in Redux “Troubleshooting” docs so I suggest you to read them.
这个问题及其解决方案在 Redux “疑难解答”文档中有详细描述，所以我建议你阅读它们。
https://redux.js.org/troubleshooting
https://redux.js.org/troubleshooting
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.
我还建议您查看 Redux 的 Flux 比较中的 Shopping Card 示例，因为它显示了如何更新嵌套对象而不以与您要求的方式类似的方式对其进行变异。
https://github.com/voronianski/flux-comparison/tree/master/redux
https://github.com/voronianski/flux-comparison/tree/master/redux
