JS Built-ins
← redux-toolkit18 / 22
redux-toolkitcreateListenerMiddlewareadvanced

createListenerMiddleware

📖 Usage Example
const listenerMiddleware = createListenerMiddleware()
listenerMiddleware.startListening({
  actionCreator: mySlice.actions.someAction,
  effect: (action, api) => { console.log('action fired:', action.type) },
})

createListenerMiddleware provides a lightweight alternative to sagas for responding to actions with side effects.

createListenerMiddleware

Listener middleware lets you run side effects in response to dispatched actions — without sagas or observables.

Challenge: Set up a listener that pushes 'inc fired' to a sideEffects array every time the counter increments.

store.dispatch(counterSlice.actions.inc())
sideEffects // → ['inc fired']
💡 Hints (3)
  • • Call `listenerMiddleware.startListening({ actionCreator, effect })` before creating the store.
  • • Add the middleware with `middleware: m => m().concat(listenerMiddleware.middleware)`.
  • • The `effect` callback runs synchronously after the action is dispatched.