How to Update Redux Middleware in React

This article provides a straightforward guide on how to update and configure Redux middleware in a React application. You will learn how to transition from legacy middleware configurations to modern Redux Toolkit practices, add custom middleware to your store, and customize the default middleware chain for optimal performance.

Modern Middleware Configuration with Redux Toolkit

In modern React development, Redux Toolkit (RTK) is the standard and recommended way to manage your Redux store. To update or add middleware in Redux Toolkit, you use the middleware field inside the configureStore function.

By default, configureStore automatically adds commonly used middleware like Redux Thunk and development-only checks. To update this list with your own custom middleware, you should pass a callback function that receives getDefaultMiddleware as an argument. This ensures you do not accidentally remove the default middleware.

Here is how to update your store by appending new middleware:

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './rootReducer';
import loggerMiddleware from './middleware/logger';
import analyticsMiddleware from './middleware/analytics';

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(loggerMiddleware, analyticsMiddleware),
});

export default store;

Using .concat() adds your new middleware to the end of the default chain. If you need your middleware to run before the default ones, you can use .prepend().

Customizing Default Middleware Settings

Sometimes, updating your middleware means changing the behavior of the built-in Redux Toolkit middleware rather than adding new ones. For example, you may want to disable the serializable state check for specific actions or entirely.

You can update these settings by passing an options object to getDefaultMiddleware:

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        // Ignore specific action types in the serialization check
        ignoredActions: ['your/action/type'],
      },
      immutableCheck: false, // Turn off immutable state check entirely
    }),
});

Updating Middleware in Legacy Redux

If you are working on an older codebase that uses core Redux instead of Redux Toolkit, your store is likely configured using createStore and applyMiddleware.

To update legacy middleware, you need to locate your store creation file and modify the arguments passed to applyMiddleware:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from './reducers';
import legacyLogger from './middleware/legacyLogger';
import newMiddleware from './middleware/newMiddleware'; // The updated middleware

const store = createStore(
  rootReducer,
  composeWithDevTools(
    applyMiddleware(thunk, legacyLogger, newMiddleware) // Appended newMiddleware
  )
);

export default store;

While this legacy method still works, it is highly recommended to migrate to Redux Toolkit’s configureStore to simplify your setup and ensure long-term compatibility with React.