React-redux存储更新,但是React没有
React-redux store updates but React does not
请原谅我,因为这个问题与我使用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- 为什么我的点击事件没有使用 react js 触发
- react router router.HistoryLocation以<noscript>但没有完美的工作
- Typescript模块没有导出的成员-react
- React没有't重新考虑道具的变化
- React AppendChild组件没有'不起作用
- React+Redux-未捕获错误:操作可能没有未定义的“;类型“;所有物
- AJAX 请求没有在我的 React 组件中设置 this.state.data
- 为什么我的状态在 React.js 中没有更新
- 有没有一条清晰的路径,我可以实现一个在 ScalaJS + React 中广泛使用上下文的 React 组件
- 有没有更好的方法来处理窗口属性&React/Redux中的子组件
- React没有绑定函数调用,尽管有相反的警告
- React路由帮助路由实际上并没有跳转到页面
- 在没有React的情况下进行类似React的编程
- 如何在没有bundler的情况下使用react.js
- React Router和React Intl:有没有更好的方法来动态加载翻译's路线
- React-redux存储更新,但是React没有
- React没有在组件中添加函数
- React没有定义
- 如何使用React没有NPM's "要求"
- Typescript [React]没有将.tsx导入转换为.jsx导入