Redux Promise Middleware

6.2.0 verified Thu Apr 23 auth: no javascript

Redux Promise Middleware is a Redux middleware that simplifies the handling of asynchronous actions by transforming actions containing Promises into a series of pending, fulfilled, and rejected actions. This allows for clear separation of concerns in Redux applications, enabling robust state management during async operations. The current stable version is 6.2.0, which includes support for Redux 5.0.0 and earlier versions. The library maintains an active release cadence, addressing bugs, improving TypeScript definitions, and ensuring compatibility with newer Redux versions. Key differentiators include its ability to work seamlessly with Redux Thunk for complex action chaining and its configurable action type delimiters, providing granular control over action naming conventions for lifecycle events.

Common errors

error TypeError: (0 , _reduxPromiseMiddleware.default) is not a function ↓

cause Attempting to call the `promiseMiddleware` default export as a function (e.g., `promiseMiddleware()`) when using v6.0.0 or later.

fix

Remove the function call. The v6+ default export is the middleware directly: applyMiddleware(promiseMiddleware).

error Error: Actions may not have an undefined 'type' property. Have you misspelled a constant? ↓

cause This generic Redux error can occur if `redux-promise-middleware` doesn't correctly process an action, often because the `payload` is not a promise, or the action structure is incorrect, leading to the middleware not generating the expected pending/fulfilled/rejected types.

fix

Ensure the action you are dispatching has a payload that is a valid Promise object. Check your action creators for correct structure.

error Property 'promiseTypeSeparator' does not exist on type 'PromiseMiddlewareOptions'. Did you mean 'promiseTypeDelimiter'? ↓

cause Using the old `promiseTypeSeparator` configuration option in v5.0.0 or later, which was renamed.

fix

Rename promiseTypeSeparator to promiseTypeDelimiter in your middleware configuration object.

Warnings

breaking The default export changed from a middleware factory function to the preconfigured middleware itself. You no longer call `promiseMiddleware()` when applying it. ↓

fix Remove the function call when importing: change `applyMiddleware(promiseMiddleware())` to `applyMiddleware(promiseMiddleware)`.

breaking The configuration property `promiseTypeSeparator` was renamed to `promiseTypeDelimiter` for improved semantic accuracy. ↓

fix Update your middleware configuration object: change `promiseTypeSeparator: '/'` to `promiseTypeDelimiter: '/'`.

gotcha Early versions of v6.x had issues with TypeScript definitions not being correctly published or having incorrect typings for `ActionType`. ↓

fix Ensure you are using `redux-promise-middleware@6.1.3` or later for the most stable TypeScript experience.

gotcha When combining with Redux Thunk, dispatching the promise action will return the promise itself. This allows chaining further actions, but be mindful of error handling in the chain. ↓

fix When dispatching a promise action in a thunk, store the result (`const response = dispatch(action)`) and then use `response.then()` or `response.catch()` for subsequent logic or error handling.

Install

npm install redux-promise-middleware

yarn add redux-promise-middleware

pnpm add redux-promise-middleware

Imports

promiseMiddleware
wrong
```
import { promiseMiddleware } from 'redux-promise-middleware'
```
correct
```
import promiseMiddleware from 'redux-promise-middleware'
```
Since v6.0.0, the default export is the preconfigured middleware function itself. Older versions (pre-v6) required `promiseMiddleware()` to be called.
createPromiseMiddleware
wrong
```
import { createPromiseMiddleware } from 'redux-promise-middleware'
```
correct
```
import promiseMiddleware from 'redux-promise-middleware'
// Use promiseMiddleware directly, no need to call a creator function anymore
```
Pre-v6.0.0, the middleware was instantiated via `promiseMiddleware({ /* config */ })`. Since v6.0.0, the default export is the already-instantiated middleware, simplifying usage and removing the need for a creator function explicitly named `createPromiseMiddleware`.
ActionType
wrong
```
import { ActionType } from 'redux-promise-middleware'
```
correct
```
import type { ActionType } from 'redux-promise-middleware'
```
This is a TypeScript type import. Ensure you use `import type` if your TypeScript version supports it, or `import { ActionType } from 'redux-promise-middleware'` if not.

Quickstart

This quickstart demonstrates how to set up `redux-promise-middleware` with a basic Redux store, defining an async action and a reducer to handle its pending, fulfilled, and rejected states.

import { createStore, applyMiddleware, combineReducers } from 'redux';
import promiseMiddleware from 'redux-promise-middleware';

// A simple reducer
const dataReducer = (state = { data: null, loading: false, error: null }, action) => {
  switch (action.type) {
    case 'FETCH_DATA_PENDING':
      return { ...state, loading: true, error: null };
    case 'FETCH_DATA_FULFILLED':
      return { ...state, loading: false, data: action.payload };
    case 'FETCH_DATA_REJECTED':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  data: dataReducer,
});

// Create the Redux store with promiseMiddleware
const store = createStore(rootReducer, applyMiddleware(promiseMiddleware));

// An async action creator
const fetchData = () => ({
  type: 'FETCH_DATA',
  payload: new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = Math.random() > 0.5;
      if (success) {
        resolve('Hello from async data!');
      } else {
        reject(new Error('Failed to fetch data.'));
      }
    }, 1000);
  }),
});

console.log('Initial state:', store.getState());

store.dispatch(fetchData());

store.subscribe(() => {
  console.log('Current state:', store.getState());
});