Redux Thunk — Async Logic Middleware for Redux

Introduction

Redux Thunk is the original middleware for handling asynchronous logic in Redux applications. By allowing dispatch to accept functions alongside plain objects, it provides a minimal but effective pattern for side effects such as API calls, timers, and conditional dispatching based on current state.

What Redux Thunk Does

• Intercepts dispatched functions and invokes them with dispatch and getState as arguments
• Enables async/await patterns directly inside action creators
• Allows conditional dispatching by reading current state before deciding what to dispatch
• Composes with other Redux middleware in the standard applyMiddleware chain
• Supports an optional extra argument for injecting services like API clients

Architecture Overview

Redux Thunk is a middleware that sits between dispatching an action and the moment it reaches the reducer. When store.dispatch receives a function instead of an object, the middleware calls that function with dispatch and getState. The thunk function can then perform async work, dispatch multiple actions over time, or inspect state to decide its next step. At roughly 14 lines of source code, it is one of the smallest middleware libraries in the ecosystem.

Self-Hosting & Configuration

• Install via npm or yarn and add to your Redux middleware stack
• Pass thunk to applyMiddleware when creating the store
• Optionally provide an extraArgument via thunk.withExtraArgument(api) for dependency injection
• Redux Toolkit includes thunk by default in configureStore, so no manual setup is needed with RTK
• Works with any Redux-compatible framework binding (React, Angular, Vue)

Key Features

• Minimal footprint at under 20 lines of code with zero dependencies
• Supports both callback and async/await patterns for async actions
• Provides access to getState inside thunks for conditional logic
• Bundled by default in Redux Toolkit via configureStore
• Compatible with TypeScript through well-maintained type definitions

Comparison with Similar Tools

• Redux Saga — Uses generator functions for complex async flows; more powerful but steeper learning curve
• Redux Observable — RxJS-based; ideal for streams and cancellation but adds a large dependency
• RTK createAsyncThunk — Built on Redux Thunk with added lifecycle actions and error handling
• Redux Promise — Simpler but limited to single-dispatch promise resolution
• Zustand / Jotai — Alternative state managers that handle async natively without middleware

FAQ

Q: Is Redux Thunk still relevant with Redux Toolkit? A: Yes. Redux Toolkit uses thunk internally, and createAsyncThunk is built on top of it. Understanding thunks remains essential.

Q: Can I use async/await in thunks? A: Yes. Thunk functions can be async, and dispatch calls inside them work as expected with await.

Q: How do I test thunk action creators? A: Call the thunk with mock dispatch and getState functions, then assert which actions were dispatched.

Q: Can thunks access the store state? A: Yes. The second argument passed to every thunk function is getState, which returns the current state tree.

Sources

• https://github.com/reduxjs/redux-thunk
• https://redux.js.org/usage/writing-logic-thunks