redux-thunk

library3.1.0jsnpmunverified

Redux Thunk is a middleware for Redux that enables writing action creators that return functions (thunks) instead of plain action objects. These thunk functions receive the `dispatch` and `getState` methods of the Redux store, allowing for asynchronous logic, conditional dispatching, and interaction with the store's current state. The current stable version is 3.1.0, released in conjunction with major updates to the entire Redux ecosystem, including Redux Toolkit 2.0, Redux core 5.0, and React-Redux 9.0. Its release cadence is closely tied to the broader Redux project releases. A key differentiator is its simplicity and official endorsement as the standard approach for handling async logic in Redux, often being included by default in `configureStore` from Redux Toolkit. It also supports injecting custom arguments, facilitating dependency injection patterns for services or APIs.

web-framework http-networking

npm install redux-thunk

github ↗package ↗

INSTALL

IMPORT

SIG · REDUX-THUNK

redux-thunk

web-frameworkjavascriptv3.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

thunk

✓ import { thunk } from 'redux-thunk';

✗ import thunk from 'redux-thunk';

Since v3.0.0, redux-thunk uses named exports. Previous versions (v2.x) used a default export.

thunk (CommonJS)

✓ const { thunk } = require('redux-thunk');

✗ const thunk = require('redux-thunk');

For CommonJS environments in v3.x, use named destructuring. For v2.x, `require('redux-thunk').default` was necessary after v2.0.0.

ThunkAction

✓ import type { ThunkAction } from 'redux-thunk';

Represents the type of a thunk action, useful for defining thunk functions with proper TypeScript inference.

ThunkDispatch

✓ import type { ThunkDispatch } from 'redux-thunk';

Represents the type of the Redux dispatch function when thunk middleware is applied, allowing dispatching of thunks as well as plain actions.

This quickstart demonstrates the manual setup of Redux Thunk with `createStore` and `applyMiddleware` in TypeScript, including a basic asynchronous thunk action.

import { createStore, applyMiddleware, AnyAction } from 'redux'; import { thunk, ThunkAction, ThunkDispatch } from 'redux-thunk'; interface RootState { count: number; } const initialState: RootState = { count: 0 }; function rootReducer(state: RootState = initialState, action: AnyAction): RootState { switch (action.type) { case 'INCREMENT': return { ...state, count: state.count + 1 }; case 'DECREMENT': return { ...state, count: state.count - 1 }; default: return state; } } // Apply the thunk middleware const store = createStore(rootReducer, applyMiddleware(thunk)); // Define a simple asynchronous thunk action const incrementAsync = (amount: number): ThunkAction<void, RootState, unknown, AnyAction> => (dispatch: ThunkDispatch<RootState, unknown, AnyAction>, getState) => { console.log(`Current count before async: ${getState().count}`); setTimeout(() => { dispatch({ type: 'INCREMENT', payload: amount }); console.log(`Current count after async: ${getState().count}`); }, 1000); }; console.log('Initial state:', store.getState()); (store.dispatch as ThunkDispatch<RootState, unknown, AnyAction>)(incrementAsync(1)); console.log('State after dispatching async thunk (will update later):', store.getState());

Debug

Known issues

breakingRedux Thunk v3.0.0 and newer versions changed from a default export to a named export. Imports using `import thunk from 'redux-thunk'` or `const thunk = require('redux-thunk').default` will fail.

fix

Update your imports to use named exports: `import { thunk } from 'redux-thunk';` or `const { thunk } = require('redux-thunk');`.

affects: >=3.0.0

breakingRedux Thunk v3.0.0 introduced significant changes to its packaging for improved ESM/CJS compatibility, aligning with Node.js's `type: "module"` approach. This may affect build tools or environments with strict module resolution.

fix

Ensure your build tools (Webpack, Rollup, etc.) are configured for modern module resolution. For Node.js, ensure correct `package.json` `type` field usage or use appropriate import/require syntax.

affects: >=3.0.0

gotchaRedux Thunk v3.x has a peer dependency on Redux v5.0.0 or higher. Using it with older Redux versions (e.g., v4.x) might lead to runtime issues or TypeScript incompatibilities.

fix

Upgrade your `redux` package to `^5.0.0` or higher. If you cannot upgrade Redux, you may need to stick with `redux-thunk` v2.x.

affects: >=3.0.0

deprecatedIn Redux Thunk v2.0.0, the CommonJS `require('redux-thunk')` without `.default` was deprecated, and required `require('redux-thunk').default` to get the middleware. This pattern is entirely obsolete in v3.x due to the named export change.

fix

For v2.x, use `require('redux-thunk').default`. For v3.x, switch to `const { thunk } = require('redux-thunk');`.

affects: >=2.0.0 <3.0.0

gotchaIf you are using Redux Toolkit, `redux-thunk` is already included by default in `configureStore`. Manually applying it via `applyMiddleware` with `configureStore` can lead to duplicate middleware or unexpected behavior.

fix

When using Redux Toolkit, avoid manually adding `thunk` middleware. If you need to customize `thunk` (e.g., with `extraArgument`), use the `getDefaultMiddleware` callback within `configureStore`'s `middleware` option.

affects: >=2.0.0

Errors

Common errors & fixes

TypeError: (0 , redux_thunk__WEBPACK_IMPORTED_MODULE_0__.default) is not a function

Attempting to import `redux-thunk` as a default export in v3.x (e.g., `import thunk from 'redux-thunk';`) when it now uses named exports.

fix

Change your import statement to `import { thunk } from 'redux-thunk';`.

TypeError: thunk is not a function

This error can occur in CommonJS environments or with incorrect tooling if you are trying to use `require('redux-thunk')` directly with `applyMiddleware(thunk)` in v3.x.

fix

For v3.x, use `const { thunk } = require('redux-thunk');`. For v2.x, ensure you are using `const thunk = require('redux-thunk').default;`.

TS2345: Argument of type 'ThunkAction<void, any, unknown, AnyAction>' is not assignable to parameter of type 'AnyAction'.

This TypeScript error typically arises when attempting to `dispatch` a thunk action without correctly typing your `dispatch` function to accept `ThunkAction` types.

fix

Cast your `store.dispatch` to `ThunkDispatch` or ensure your `dispatch` parameter in hooks is correctly typed (e.g., `const dispatch = useDispatch<AppDispatch>();` where `AppDispatch` includes `ThunkDispatch`).

TypeError: Cannot read properties of undefined (reading 'api')

This happens when a thunk function expects an `extraArgument` (e.g., `api`) but `redux-thunk` was not configured with one, or the `extraArgument` was not provided as an object when multiple values are expected.

fix

Configure the `thunk` middleware with `extraArgument` via `applyMiddleware(thunk.withExtraArgument(myApi))` for manual setup, or within `configureStore`'s `middleware` option: `thunk: { extraArgument: myApi }`.

Upgrade

Version history

3.1.0latest on npm

Audit

Dependencies

reduxrequiredRedux Thunk is middleware for Redux and requires a compatible version of Redux to function. Version 3.x specifically targets Redux v5.0.0 and above.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/reduxjs/redux-thunk ↗

packagehttps://www.npmjs.com/package/redux-thunk ↗