How can you listen to any dispatched action globally?

Question

Accepted Answer

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. Use custom middleware to intercept every dispatched action and perform side effects or logging. Use `builder.addMatcher()` in `createSlice()` to handle groups of actions based on conditions. Integrate listener middleware (`createListenerMiddleware`) to respond to specific or all actions declaratively. const actionLogger = store => next => action => {
  console.log('Dispatched Action:', action);
  const result = next(action);
  console.log('Updated State:', store.getState());
  return result;
};

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(actionLogger)
}); import { configureStore, createListenerMiddleware } from '@reduxjs/toolkit';

const listenerMiddleware = createListenerMiddleware();

listenerMiddleware.startListening({
  predicate: (action) => true, // Listen to all actions
  effect: async (action, listenerApi) => {
    console.log('Global Listener Triggered:', action.type);
  }
});

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().prepend(listenerMiddleware.middleware)
}); 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.

How can you listen to any dispatched action globally?

Scenario Questions

Follow-up Questions