[英]React-redux store updates but React does not
Bear with me here as this question pertains to my first test app using either React, Redux or react-redux. 请耐心等待,因为这个问题属于我的第一个使用React,Redux或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}
]
}
]
}
I have just two actions: 我只有两个动作:
1. CHANGE_HASH (as in url hash). 1. CHANGE_HASH(在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). 此操作始终按预期工作,并且所有reducer都会更新state.activePageId(是的,我正在克隆状态对象而不是修改它)。 After the action, I can see the state has changed in the Redux store and I can see that React has updated. 在操作之后,我可以看到Redux商店中的状态已经发生变化,我可以看到React已经更新。
function changeHash(id) {
return {
type: "CHANGE_HASH",
id: id
}
}
2. ADD_TRANSACTION (form submission). 2. ADD_TRANSACTION(表单提交)。 This action never updates React, but it always updates the Redux store. 此操作永远不会更新React,但它始终更新Redux存储。 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. 此操作的reducer正在更新state.accounts [0] .balance并且它将一个事务对象添加到数组state.accounts [0] .transactions。 I don't receive any errors, React just doesn't update. 我没有收到任何错误,React只是没有更新。 HOWEVER, if I dispatch a CHANGE_HASH action React will catch up and display all of the ADD_TRANSACTION state updates properly. 但是,如果我调度CHANGE_HASH操作,React将赶上并正确显示所有ADD_TRANSACTION状态更新。
function addTransaction(transaction, balance, account) { return { type: "ADD_TRANSACTION", payload: { transaction: transaction, balance: balance, account: account } } } 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 store is updated. 我认为React应该在Redux商店更新时更新。
Github repo: https://github.com/curiousercreative/bankDemo Deployment: http://curiousercreative.com/demos/bankDemo/ Github回购: https : //github.com/curiousercreative/bankDemo部署: http : //curiousercreative.com/demos/bankDemo/
ps I lied about not having any errors. ps我撒谎没有任何错误。 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. 我确实有一些警告“”警告:数组或迭代器中的每个子项应该有一个唯一的“关键”道具......“我已经给它们一个关键的道具设置它的索引。我怀疑它有什么尽管我的问题。
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 Comparison中的Shopping Card示例,因为它展示了如何更新嵌套对象,而不会以与你要求的方式类似的方式对它们进行改变。
https://github.com/voronianski/flux-comparison/tree/master/redux https://github.com/voronianski/flux-comparison/tree/master/redux
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.