← Lessons

quiz vs the machine

Gold1380

Frontend

The Redux Middleware Thunks

Where side effects live in Redux and how thunks dispatch async logic.

5 min read · core · beat Gold to climb

What it is

Middleware sits between dispatching an action and the moment it reaches the reducer. It is the place for logging, crash reporting, and asynchronous work, none of which belong in pure reducers.

The thunk pattern

Normally you dispatch a plain object. The thunk middleware lets you dispatch a function instead. That function receives dispatch and getState, so it can run async code and then dispatch real actions when results arrive.

  • Dispatch a function for async or conditional logic.
  • Inside it you may call APIs and read current state.
  • Dispatch plain actions to report progress and results.

Why a chain

Middleware is composed into a chain. Each one can inspect an action, pass it along, modify it, or stop it. The reducer only ever sees plain objects, keeping it pure.

Key idea

Thunks let you dispatch functions so async side effects run in middleware, while reducers still receive only plain, pure actions.

Check yourself

Answer to earn rating on the learn ladder.

1. What does a thunk function receive as arguments?

2. Why do side effects belong in middleware, not reducers?