Redux Thunk Middleware

Common errors

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

  cause 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

  cause 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'.

  cause 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')

  cause 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 }`.

Warnings

• breaking Redux 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');`.
• breaking Redux 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.
• gotcha Redux 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.
• deprecated In 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');`.
• gotcha If 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.

Install

• npm install redux-thunk npm
• yarn add redux-thunk yarn
• pnpm add redux-thunk pnpm

Imports

• thunk
  wrong:

  import thunk from 'redux-thunk';

  correct:

  import { thunk } from 'redux-thunk';

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

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

  correct:

  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.

Quickstart

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());