Redux 工具包 - 如何在切片之间共享操作

Question

我正在使用 Redux Toolkit 并且有三个组件，每个组件都有一个切片：A、B、C。

我需要组件 A 来调度一个动作，组件 B 和 C 来响应它。 我怎样才能实现所有组件不相互依赖，类似于 pub/sub 模式？

Answer 1

首先，在对动作做出反应的组件 B 和 C 中添加 extraReducers。

但是，您可能会遇到 the circular reference problem. 一个组件引用另一个组件的情况，反之亦然。

我用过的作者mentions a solution on github。即，将共享的 reducer 分离到一个单独的文件中。我的实现如下：

• featureA/byId/actions.js 包含定义的动作 用 createAction.
• featureB/byId/actions.js 包含用 createAction.
定义的动作

每个 createAction 都是类似于以下内容的操作：

const createTodo = createAction("todos/createTodo");

• featureA/byId/reducer.js 从上面的两个 action.js 文件中导入它的 extraReducer 动作。
• featureB/byId/reducer.js 从上面的两个 action.js 文件中导入它的 extraReducer 动作。

结果：在多个reducer中使用的action没有循环引用问题。