What is Middleware in Redux: Simple Explanation and Example

Middleware in Redux is a way to extend Redux's behavior by intercepting actions before they reach the reducer. It lets you add extra logic like logging, asynchronous calls, or modifying actions without changing the core Redux flow.

How It Works

Think of Redux middleware as a helpful assistant standing between your app's actions and the place where those actions change the state (the reducer). When you send an action, the middleware can catch it first, do something extra like logging or waiting for data, and then pass it along.

This is like when you send a letter through a mailroom that checks or stamps it before it reaches the recipient. Middleware can also stop the action or send new actions, giving you control over the flow without changing the main Redux logic.

Example

This example shows a simple logging middleware that prints each action and the new state after the action is processed.

javascript

import { createStore, applyMiddleware } from 'redux';

// Reducer: updates state based on action
const reducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

// Middleware: logs actions and state
const loggerMiddleware = store => next => action => {
  console.log('Dispatching:', action);
  const result = next(action); // Pass action to reducer
  console.log('Next state:', store.getState());
  return result;
};

// Create store with middleware
const store = createStore(reducer, applyMiddleware(loggerMiddleware));

// Dispatch some actions
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'DECREMENT' });

Output

Dispatching: { type: 'INCREMENT' }
Next state: 1
Dispatching: { type: 'DECREMENT' }
Next state: 0

When to Use

Use middleware when you want to add extra steps to your Redux actions without changing your reducers. Common uses include:

• Logging actions and state changes for debugging
• Handling asynchronous tasks like fetching data from a server
• Modifying or delaying actions before they reach reducers
• Sending analytics or error reports when actions happen

Middleware keeps your code organized by separating these concerns from your main state logic.

Key Points

• Middleware intercepts actions before reducers handle them.
• It can modify, delay, or log actions.
• Middleware helps manage side effects like async calls.
• It keeps Redux logic clean and organized.

Key Takeaways

Middleware lets you add extra logic between dispatching actions and reducers in Redux.

It is useful for logging, async operations, and modifying actions without changing reducers.

Middleware keeps your Redux code clean by separating side effects from state updates.

You create middleware as functions that receive the store and next dispatch function.

Apply middleware when creating the Redux store to enable its behavior.