Registry /
http-networking / redux-promise-middleware
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
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
promiseMiddleware
✓ import promiseMiddleware from 'redux-promise-middleware'
✗ 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
✓ import promiseMiddleware from 'redux-promise-middleware'
// Use promiseMiddleware directly, no need to call a creator function anymore
✗ import { createPromiseMiddleware } from 'redux-promise-middleware'
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
✓ import type { ActionType } from 'redux-promise-middleware'
✗ import { 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.
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());
});
Errors
Common errors & fixes
TypeError: (0 , _reduxPromiseMiddleware.default) is not a function
Attempting to call the `promiseMiddleware` default export as a function (e.g., `promiseMiddleware()`) when using v6.0.0 or later.
fixRemove the function call. The v6+ default export is the middleware directly: `applyMiddleware(promiseMiddleware)`.
Error: Actions may not have an undefined 'type' property. Have you misspelled a constant?
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.
fixEnsure the action you are dispatching has a `payload` that is a valid Promise object. Check your action creators for correct structure.
Property 'promiseTypeSeparator' does not exist on type 'PromiseMiddlewareOptions'. Did you mean 'promiseTypeDelimiter'?
Using the old `promiseTypeSeparator` configuration option in v5.0.0 or later, which was renamed.
fixRename `promiseTypeSeparator` to `promiseTypeDelimiter` in your middleware configuration object.
Audit
Dependencies
reduxrequiredCore dependency for Redux applications, required for applying the middleware.