Retain Redux Toolkit defaults while adding application middleware
Store setup
Redux Toolkit · Function
getDefaultMiddleware
getDefaultMiddleware returns Redux Toolkit's standard middleware array for use in configureStore. Its options can disable or configure individual defaults, while concat and prepend support adding custom middleware.
How it works
Inside configureStore's middleware callback, invoke the supplied function to obtain Redux Toolkit's default middleware array. Pass an options object to disable a default or customize its behavior, then use array helpers such as concat or prepend to add application middleware while preserving the defaults.
Syntax
function getDefaultMiddleware<S = any>(options: GetDefaultMiddlewareOptions = {}): Middleware<{}, S>[]Parameters
| Name | Type | Description |
|---|---|---|
options | GetDefaultMiddlewareOptions | Optional settings for including, excluding, or configuring the default middleware; defaults to an empty object. |
Returns
An array of Redux middleware: Middleware<{}, S>[]
Key points
- The function produces the middleware collection used as the store's standard baseline.
- An option field set to false removes its associated default middleware.
- Matching option objects tune individual defaults instead of disabling them.
- Use it in the configureStore callback when extending, rather than replacing, the standard middleware set.
- The returned array's order determines the sequence in which middleware process dispatched actions.
Example: Keep defaults and add middleware
import { configureStore } from '@reduxjs/toolkit'
import logger from 'redux-logger'
import rootReducer from './reducer'
export const store = configureStore({
reducer: rootReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(logger),
})Creates a store with Redux Toolkit's defaults and appends a logger middleware.
When to use it
Adjust immutability or serializability checks for specific state paths
Development configuration
Place custom middleware before or after the standard chain
Middleware ordering
Interview questions
QWhat does getDefaultMiddleware provide?
The callback receives getDefaultMiddleware, and calling it returns Redux Toolkit's default middleware array. The callback should return the middleware array that configureStore installs.
Follow-up: How would you add logger middleware without losing thunk and development checks? Return getDefaultMiddleware().concat(logger), placing logger after the defaults.
QHow can its default middleware be configured?
Pass options such as immutableCheck, serializableCheck, or thunk to configure individual defaults. A corresponding false value excludes that middleware, while an options object customizes it.
Follow-up: How can you customize immutability checking while retaining every other default? Call getDefaultMiddleware({ immutableCheck: { ignoredPaths: ['somePath'] } }).
QHow do concat and prepend differ?
Use concat to append middleware after the defaults or prepend to place middleware before them. Ordering matters because middleware run in array order when an action is dispatched.
Follow-up: Why might prepend be preferable for a listener middleware? It lets that middleware observe the dispatch before the default chain processes it.
Related
configureStoreTuplecreateImmutableStateInvariantMiddlewarecreateSerializableStateInvariantMiddlewareredux-thunk