Redux Toolkit - How to share an action between slices

Question

I am using Redux Toolkit and have three components with a slice for each component: A, B, C.

I need component A to dispatch an action and components B and C to react to it. How can I achieve that having all components not being dependant on each other, similar to a pub/sub pattern?

Answer 1

Firstly, add extraReducers in components B and C reacting to the action.

However, you risk ending up in the circular reference problem. where one component references the other and vice versa.

The authors mentions a solution on github which i had use of. Namely, separating the shared reducers into a separate file. My implementation of this is the following:

• featureA/byId/actions.js contains actions defined with createAction.
• featureB/byId/actions.js contains actions defined with createAction.

Each createAction is an action similar to the following:

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

• featureA/byId/reducer.js imports its extraReducer-actions from both action.js-files above.
• featureB/byId/reducer.js imports its extraReducer-actions from both action.js-files above.

Result: actions used in multiple reducers without circular reference problems.