How can you listen to any dispatched action globally?
In Redux Toolkit, you can listen to every dispatched action globally by using middleware or by using the addMatcher function inside a slice’s extraReducers with a universal matcher like isAnyOf() or custom predicate functions.
- 1
Use custom middleware to intercept every dispatched action and perform side effects or logging.
- 2
Use
builder.addMatcher()increateSlice()to handle groups of actions based on conditions. - 3
Integrate listener middleware (
createListenerMiddleware) to respond to specific or all actions declaratively.
Using createListenerMiddleware is the most modern and recommended approach in Redux Toolkit, as it cleanly separates side effects from reducers and allows reacting to any action in a declarative way.
Scenario Questions
0-2 years experience
- 1We have a simple RTK slice and need to log every action that passes through the store. How would you set up a global listener to achieve that?
- 2If you use store.subscribe, what information can you get inside the callback and how would you determine which action just fired?
- 3You need to show a toast whenever the 'user/logout' action is dispatched, without changing the slice code. How would you implement that globally?
2-5 years experience
- 1Your feature must display a toast for any API request that fails, regardless of which slice dispatches the failure. Walk me through using RTK's listener middleware to capture those actions and why you’d choose it over a hand‑rolled middleware.
- 2During debugging you notice a thunk never updates the UI and suspect the global listener you added for logging is interfering. How would you investigate and resolve the issue?
- 3We want to run a side‑effect only for actions whose type ends with '/rejected'. How would you implement that with addListener and what are the trade‑offs?
5-8 years experience
- 1At scale we have dozens of slices and many async thunks. Design a solution that logs every action for analytics while minimizing performance impact, using RTK's listener middleware or another mechanism. Discuss filtering, batching, and testability.
- 2Our team is debating a custom middleware that inspects every action versus RTK's built‑in listenerMiddleware. What are the architectural implications for type safety, maintainability, and hot‑module reloading?
- 3If we need to pause or debounce listeners during a bulk import of 10,000 items, how would you control the global listener behavior without losing important actions?
8+ years experience
- 1We are migrating a legacy Redux codebase to Redux Toolkit across multiple squads and must add a global audit log that captures every action, including third‑party reducers, while preserving backward compatibility. How would you plan the rollout, choose between listener middleware and store enhancers, and handle versioning and testing across teams?
- 2In a micro‑frontend architecture each micro‑app has its own RTK store, but we need a central service to listen to actions from all stores for cross‑app analytics. Propose an architecture that enables global listening while keeping stores isolated, and discuss the trade‑offs.
Follow-up Questions
- What are the trade‑offs between listenerMiddleware and a custom middleware for global action handling?
- How would you unit‑test that your global listener runs only for the intended actions?
- Can you think of a scenario where a listener might miss an action and how to guard against it?