What is middleware in Redux and how do thunks work?

Question

Accepted Answer

**Middleware** sits between dispatching an action and the action reaching the reducer, letting you intercept actions to handle **side effects** (async API calls, logging) — which reducers can't do because they must stay pure. **Thunks** are the most common middleware, enabling async logic.

## Where middleware fits

```text
dispatch(action) → [ middleware 1 → middleware 2 → ... ] → reducer → store
                     (can inspect, modify, delay, or stop actions; do side effects)
```

Middleware wraps `dispatch`, so every action passes through it before reaching reducers. This is the designated place for the side effects that reducers forbid.

## The problem thunks solve

```js
// reducers are pure → can't do this. Plain actions are just objects → can't either.
async function loadUsers() {
  const users = await fetch("/api/users").then(r => r.json()); // a SIDE EFFECT
  // ...need to dispatch the result into the store
}
```

You need a place to do async work (fetch) and then dispatch the result. Thunk middleware allows dispatching a **function** instead of a plain object.

## A thunk — a function that gets dispatch

```js
// a "thunk" is a function (dispatch, getState) => { ... } doing async work
function fetchUsers() {
  return async (dispatch, getState) => {
    dispatch({ type: "users/loading" });           // 1. signal loading
    try {
      const users = await api.getUsers();           // 2. async side effect
      dispatch({ type: "users/loaded", payload: users }); // 3. dispatch the result
    } catch (err) {
      dispatch({ type: "users/error", payload: err.message }); // 4. handle errors
    }
  };
}

// thunk middleware sees a FUNCTION was dispatched and calls it with dispatch/getState
store.dispatch(fetchUsers());
```

The thunk performs the async work and dispatches plain actions (`loading`/`loaded`/`error`) at each stage — keeping reducers pure while the side effect lives in the thunk.

## Other middleware uses & alternatives

```text
✓ Logging every action, analytics, crash reporting
✓ Redux Toolkit includes thunk by default + createAsyncThunk for less boilerplate
Alternatives for complex async flows: redux-saga (generators), redux-observable (RxJS)
```

## Why it matters

Middleware is how Redux handles everything reducers can't — especially **async side effects** — while preserving the purity that makes reducers predictable and testable.

Thunks are the standard, approachable way to do async (fetching data, dispatching loading/success/error actions).

Understanding the middleware pipeline and the thunk pattern is essential for real Redux apps, since almost all of them need to load data; RTK's `createAsyncThunk` builds on exactly this.