[英]How to mutate a array on state in a redux reducer?
更改前的状态如下所示:
foreignBases: [
{
base: {
id: "5b8125ec14bb4f35f8f01aa9",
...
},
baseuser: {
userId: "tester1",
...
}
},
{ base: { ... }, baseuser: { ... } }
]
通过 dispatch 用户将baseuser
键中的布尔值更改为true
,然后reducer应该更新这个特定键值对的状态,但我似乎无法正确处理:
for (let i = 0; i < state.foreignBases.length; i++) {
if (action.baseUser.created === state.foreignBases[i].baseuser.created) {
return Object.assign({}, state, {
foreignBases: [
...state.foreignBases,
{
base: { ...state.foreignBases[i].base },
baseuser: action.baseUser
}
]
});
}
这只是将另一个对象添加到状态,当我真的只需要在一个对象中替换一个 baseuser 的布尔值时
请务必检查以下更新。
扩展运算符重新插入整个foreignBases,然后您添加另一个对象,我认为这是您想要的突变。
我想你的意思是这样的(未经测试)
for (let i = 0; i < state.foreignBases.length; i++) {
if (action.baseUser.created === state.foreignBases[i].baseuser.created) {
let foreignBases = [...state.foreignBases];
foreignBases[i].baseuser = action.baseUser;
return Object.assign({}, state, {foreignBases});
}
}
更新:@devserkan 提醒我,扩展运算符“不进行深度复制”,这是 Redux 中的禁忌! 所以我去寻找更新数组官方模式中的一个项目,我相信它是这样应用的(再次,未经测试):
let foreignBases = state.foreignBases.map((foreignBase) => {
if (action.baseUser.created === foreignBase.baseuser.created) {
return {action.baseUser};
} else {
return foreignBase
}
});
return Object.assign({}, state, {
...foreignBase,
baseuser: action.baseUser
});
更新 2 :评论中的 @devserkan 再次提供了宝贵的见解,这次通过嵌套在状态对象的部分中来修复原始 for 循环。 这类似于突变。 这种方法避免了这种情况,并允许您仍然使用 for 循环。
for (let i = 0; i < state.foreignBases.length; i++) {
if (action.baseUser.created === state.foreignBases[i].baseuser.created) {
const newItem = {
...state.foreignBases[i],
baseuser: action.baseUser
};
const newforeignBases = Object.assign([], state.foreignBases, {
[i]: newItem
});
return Object.assign({}, state, { foreignBases: newforeignBases });
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.