JS Built-ins
← redux-toolkit19 / 22
redux-toolkitconfigureStoreintermediate

Configuring Middleware

📖 Usage Example
const store = configureStore({
  reducer: myReducer,
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware().concat(loggingMiddleware),
})

Extend the default middleware array with custom middleware using getDefaultMiddleware().concat().

Configuring Middleware

configureStore accepts a middleware option. Pass a function getDefaultMiddleware => getDefaultMiddleware().concat(myMiddleware) to add custom middleware while keeping the defaults (thunk, serializability check, etc.).

Challenge: Add a logging middleware that records dispatched action types to a logged array.

💡 Hints (3)
  • • Middleware signature: `store => next => action => { ... return next(action) }`.
  • • Always call `return next(action)` to pass the action down the middleware chain.
  • • Use `getDefaultMiddleware().concat(myMiddleware)` to preserve thunk and other defaults.