5. How do you add custom middleware to the store?

Question

Accepted Answer

In Redux Toolkit, you can easily add custom middleware to your store using the `middleware` option in `configureStore()`. This allows you to extend the behavior of Redux by intercepting actions, logging, or performing side effects before they reach the reducer. **1. Create a Middleware Function:** Define a middleware function that takes `store`, `next`, and `action` as parameters. **2. Use getDefaultMiddleware():** Retrieve Redux Toolkit’s built-in middlewares. **3. Concatenate Custom Middleware:** Add your middleware using `.concat()` to ensure default middlewares are preserved. import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './rootReducer';

// Custom middleware
const loggerMiddleware = (store) => (next) => (action) => {
  console.log('Dispatching:', action);
  const result = next(action);
  console.log('Next state:', store.getState());
  return result;
};

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(loggerMiddleware),
}); This setup keeps Redux Toolkit’s default middlewares (like `redux-thunk`, `serializableCheck`, and `immutableCheck`) while adding your own logic to enhance debugging or handle custom behavior. **- Flexibility:** Add cross-cutting logic such as logging, analytics, or authentication checks. **- Maintainability:** Keeps side effects separate from reducers, improving code organization. **- Extensibility:** Multiple middlewares can be composed together for modular logic handling. In summary, custom middleware extends Redux Toolkit’s capabilities without replacing the defaults, giving developers fine-grained control over how actions flow through the store.

5. How do you add custom middleware to the store?

Adding Custom Middleware in Redux Toolkit

5. How do you add custom middleware to the store?

Adding Custom Middleware in Redux Toolkit

Scenario Questions

Follow-up Questions