reactjs - 如何在 React 应用程序中使用 redux 工具包更新不同减速器(切片)中的嵌套项
问题描述
我有以下代码(我删除了大部分代码以使其更容易理解 - 但一切正常):
“角色”减速机:
// some async thunks
const rolesSlice = createSlice({
name: "role",
initialState,
reducers: { // some reducers here },
extraReducers: {
// a bunch of extraReducers
[deleteRole.fulfilled]: (state, { payload }) => {
state.roles = state.roles.filter((role) => role._id !== payload.id);
state.loading = false;
state.hasErrors = false;
},
},
});
export const rolesSelector = (state) => state.roles;
export default rolesSlice.reducer;
“场景”减速器:
// some async thunks
const scenesSlice = createSlice({
name: "scene",
initialState,
reducers: {},
extraReducers: {
[fetchScenes.fulfilled]: (state, { payload }) => {
state.scenes = payload.map((scene) => scene);
state.loading = false;
state.scenesFetched = true;
}
}
export const scenesSelector = (state) => state.scenes;
export default scenesSlice.reducer;
一个带有按钮和 handleDelete 函数的组件:
// a react functional component
function handleDelete(role) {
// some confirmation code
dispatch(deleteRole(role._id));
}
我的场景模型(和商店状态)如下所示:
[
{
number: 1,
roles: [role1, role2]
},
{
number: 2,
roles: [role3, role5]
}
]
我想要实现的是,当一个角色被删除时,state.scenes 会被更新(映射场景并过滤掉每个被删除角色的出现)。
所以我的问题是,如何在不从组件调用两个不同操作的情况下更新状态(这是推荐的方式?)
提前致谢!
解决方案
您可以使用 的extraReducers
属性createSlice
来响应在另一个切片中定义的操作,或者在切片外部定义的操作,就像它们在此处一样。
您想遍历每个场景并从角色数组中删除已删除的角色。如果您只是用最容易编写的过滤版本替换每个数组。但这会导致不必要的重新渲染,因为您要替换的某些数组未更改。相反,我们可以使用.findIndex()
and .splice()
,类似于这个例子。
extraReducers: {
[fetchScenes.fulfilled]: (state, { payload }) => { ... }
[deleteRole.fulfilled]: (state, { payload }) => {
state.scenes.forEach( scene => {
// find the index of the deleted role id in an array of ids
const i = scene.roles.findIndex( id => id === payload.id );
// if the array contains the deleted role
if ( i !== -1 ) {
// remove one element starting from that position
scene.roles.splice( i, 1 )
}
})
}
}
推荐阅读
- flutter - 解码json颤动
- apache-spark - 如果我使用 reduceByKey 或 groupByKey 一个只有两个键的大型数据集会发生什么
- android - 在两个活动之间移动,包括数据发送和接收,而不会丢失数据
- javascript - JavaScript 数组应用程序
- reactjs - React Stripe JS 和 React Stepper
- python - 无法将来自 Windows 客户端的工件记录到在 GCP VM 实例上运行的 mlflow 服务器
- apache-flink - 如果 flink 的 keyBy 运算符被赋予不同的键,然后是翻转窗口,会发生什么
- python-3.x - 如何将字典的值从列表类型更改为字符串类型
- scrapy - 用于scrapy的Pycharm ideolog
- amazon-web-services - AWS DAX 中的访问被拒绝异常