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

Question

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

我需要组件 A 分派(dispatch)一个 Action ，组件 B 和 C 对其使用react。 我怎样才能让所有组件不相互依赖，类似于发布/订阅模式？

Answer 1

首先，在组件 B 和 C 中添加 extraReducers 以响应操作。

但是，您可能会以 the circular reference problem. 结束其中一个组件引用另一个组件，反之亦然。

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

• featureA/byId/actions.js 包含定义的 Action 使用 createAction。
• featureB/byId/actions.js 包含使用 createAction 定义的操作。

每个 createAction 都是类似于以下的操作:

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

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

结果:在多个 reducer 中使用的操作没有循环引用问题。