createListenerMiddleware is a side effects middleware for running logic in response to dispatched actions
createListenerMiddleware is a side effects middleware for running logic in response to dispatched actions.
Redux Toolkit · API · all subjects
listener middleware api
12 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
createListenerMiddleware defines listener entries with effects
createListenerMiddleware() lets you define listener entries that contain an effect callback with additional logic, and a way to specify when that callback should run based on dispatched actions or state changes. It is a lightweight alternative to Redux async middleware like sagas and observables.
setupListeners function signature and purpose
setupListeners is a function that takes a ThunkDispatch and an optional customHandler function as parameters. It returns a cleanup function. The customHandler receives the dispatch and an object with four action creators: onFocus, onFocusLost, onOnline, and onOffline. The customHandler itself returns a cleanup function. setupListeners enables RTK Query to refetch data when the window regains focus, the network reconnects, or other browser events occur.
setupListeners function signature exact parameters
setupListeners(dispatch: ThunkDispatch<any, any, any>, customHandler?: (dispatch: ThunkDispatch<any, any, any>, actions: { onFocus: typeof onFocus, onFocusLost: typeof onFocusLost, onOnline: typeof onOnline, onOffline: typeof onOffline }) => () => void): () => void
Use listener middleware for reactive workflows
Use listener middleware for workflows that react to future actions or state changes over time instead of driving one imperative request from a single callsite. Listeners enable watching for state changes and dispatching follow-up actions reactively.
Listener middleware must prepend not concat
When adding listener middleware to configureStore, use getDefaultMiddleware().prepend(listenerMiddleware.middleware) instead of .concat(). This is critical because listener add and remove actions may carry functions, so the listener middleware must run before the serializability checks.
startListening with actionCreator and effect
Call startListening with an object containing actionCreator (the action to listen for) and effect (an async function receiving the action and listenerApi). The listenerApi has a dispatch method to dispatch other actions reactively.
startListening with predicate and effect
Call startListening with a predicate function that receives _action and currentState, returning a boolean for when to trigger the effect. The effect runs as an async function when the predicate returns true, enabling reactive workflows that respond to state changes.
Do not poll state changes inside thunks
Do not use polling loops inside thunk functions to wait for state changes, such as using getState() in a while loop with setTimeout. This fights the architecture. Use listener middleware with a predicate instead to reactively respond when state reaches the target condition.
Listener middleware vs createAsyncThunk vs RTK Query decision table
Use RTK Query for cached server data. Use createAsyncThunk or a thunk for one imperative async workflow with dispatch and getState. Use createListenerMiddleware to react to later actions or state transitions. A good app often mixes imperative and reactive workflows, split by job rather than by ideology.
Useful listener helper functions
The listener middleware provides these helper functions: predicate (react to any action when a state condition becomes true), condition (wait until a condition becomes true before continuing), take (wait for the next matching action), cancelActiveListeners (cancel older instances of the same workflow), and fork (start a child task).
Example: cancel stale work with listener middleware
startAppListening({ actionCreator: searchRequested, effect: async (action, listenerApi) => { listenerApi.cancelActiveListeners() await listenerApi.delay(250) listenerApi.dispatch(searchStarted(action.payload)) } }). This demonstrates long-lived reactive behavior that does not fit a thunk well, using cancelActiveListeners to prevent stale requests and delay for debouncing.