Action-driven side effects
Run analytics or logging after a specific Redux action.
Redux Toolkit · Type Alias
ListenerEffect
ListenerEffect is the callback type for Redux Toolkit listener entries. It receives the matching action and a listener API, and may run synchronous or asynchronous reactive logic.
How it works
ListenerEffect is the callback type used by Redux Toolkit listener entries. The callback receives the matched action first and a listener API second, enabling access to state, dispatch, cancellation, waiting, and task helpers while running synchronously or asynchronously.
Syntax
ListenerEffect<Action, State, Dispatch>Parameters
| Name | Type | Description |
|---|---|---|
action | Action | The dispatched action that matched the listener's configured trigger. |
listenerApi | ListenerApi<State, Dispatch> | The listener API, including dispatch, state access, cancellation, waiting, and task utilities. |
Returns
A listener effect callback returns void or a Promise<void>; its result is not dispatched as an action.
Key points
- The first callback parameter is the action that matched the listener.
- The second parameter provides listener-specific workflow methods alongside dispatch and state access.
- The listener API is consistently supplied as the callback's second argument.
- Effect code can use the API's utilities throughout its workflow rather than only during initial execution.
- Static registration is performed with startListening during middleware setup.
Common mistakes
- A listener entry must specify exactly one trigger criterion: type, actionCreator, matcher, or predicate.
- The effect observes the updated state, not the state before the dispatched action is reduced.
Example: Typed listener effect
import { createListenerMiddleware, type ListenerEffect } from '@reduxjs/toolkit'
type State = { count: number }
type Action = { type: 'increment'; payload: number }
const listener = createListenerMiddleware<State>()
const effect: ListenerEffect<Action, State> = async (action, api) => {
console.log(action.payload, api.getState().count)
}
listener.startListening({ type: 'increment', effect })Defines a typed listener effect that receives the matched action and listener API, then registers it for an action type.
When to use it
Cancellable async workflows
Wait for another action or state condition before continuing.
Reactive state coordination
Dispatch follow-up actions after reducers update the store.
Interview questions
QWhat is ListenerEffect and what arguments does it receive?
ListenerEffect is the callback signature for a listener middleware entry. It receives the matched action as its first argument and a listener API object as its second argument, and it may contain synchronous or asynchronous logic.
Follow-up: How can a listener implement a delayed or cancellable workflow? Use listener API utilities such as condition, cancelActiveListeners, pause, or fork inside the effect.
QWhen does a ListenerEffect run relative to reducers?
The callback runs after the root reducer has handled the action, so listener logic can inspect the resulting state through the listener API. This makes it suitable for reacting to actions or state changes.
Follow-up: What ordering implication matters for derived state? Any state read by the effect reflects the reducer's completed update for that action.
QHow is a ListenerEffect registered and triggered?
Register the callback with startListening and provide exactly one matching option: type, actionCreator, matcher, or predicate. The effect can then dispatch additional actions or perform asynchronous work through its API.
Follow-up: How can registration change at runtime? Dispatch addListener or removeListener actions to add or remove listener entries dynamically.
Related
createListenerMiddlewarestartListeningListenerApiaddListenerremoveListener