Registry /
aws / redux-promise-middleware-actions
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.
createAction
✓ import { createAction } from 'redux-promise-middleware-actions';
✗ const createAction = require('redux-promise-middleware-actions').createAction;
Used for creating synchronous Redux actions. The library is ESM-first but offers CJS compatibility for older Node.js environments.
createAsyncAction
✓ import { createAsyncAction } from 'redux-promise-middleware-actions';
✗ import createAsyncAction from 'redux-promise-middleware-actions';
The primary function for creating actions with a promise payload, which `redux-promise-middleware` then processes into _PENDING, _FULFILLED, and _REJECTED states.
String(actionCreator)
✓ case String(myActionCreator.fulfilled): // in a reducer
✗ case 'MY_ACTION_FULFILLED': // in a reducer
Action creators generated by this library can be cast to a string to get their action type, ensuring type safety and code navigation. This pattern is crucial for TypeScript users.
This quickstart demonstrates how to configure a Redux store with `redux-promise-middleware` and use `redux-promise-middleware-actions` to create and dispatch an asynchronous action, showing how the reducer handles `_PENDING`, `_FULFILLED`, and `_REJECTED` states.
import { createStore, applyMiddleware, compose } from 'redux';
import promiseMiddleware from 'redux-promise-middleware';
import { createAsyncAction } from 'redux-promise-middleware-actions';
// 1. Setup Redux store with promiseMiddleware
// Ensure Redux DevTools compatibility if available
const composeEnhancers = (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;
// A simple reducer to handle our async action states
const rootReducer = (state = { data: null, loading: false, error: null }, action) => {
switch (String(action.type)) { // Use String(action.type) for type matching
case String(fetchData.pending): // Action.type for pending actions is usually the base type + _PENDING suffix
return { ...state, loading: true, error: null };
case String(fetchData.fulfilled): // For fulfilled, payload is the resolved promise value
return { ...state, loading: false, data: action.payload };
case String(fetchData.rejected): // For rejected, payload is the error object
return { ...state, loading: false, error: action.payload };
default:
return state;
}
};
const store = createStore(
rootReducer,
composeEnhancers(applyMiddleware(promiseMiddleware))
);
// 2. Create an async action
export const fetchData = createAsyncAction('FETCH_DATA', async (id) => {
// Simulate an asynchronous operation (e.g., an API call)
console.log(`Fetching data for ID: ${id}...`);
const response = await new Promise(resolve => {
setTimeout(() => {
if (id === 1) {
resolve({ id, value: 'sample data successfully fetched' });
} else {
throw new Error(`Failed to fetch data for ID: ${id}`);
}
}, 1000);
});
return response;
});
// 3. Dispatch the async action
console.log('--- Dispatching fetchData(1) (success) ---');
store.dispatch(fetchData(1));
// Observe state changes over time (for demonstration)
const unsubscribe = store.subscribe(() => {
console.log('Current state:', store.getState());
});
// Dispatch another action after a short delay to demonstrate error handling
setTimeout(() => {
console.log('\n--- Dispatching fetchData(2) (failure) ---');
store.dispatch(fetchData(2));
}, 3000);
// Clean up subscription after demonstration
setTimeout(() => {
unsubscribe();
console.log('\nDemonstration complete.');
}, 5000);
Errors
Common errors & fixes
Argument of type 'string' is not assignable to parameter of type 'AnyAction'.
Attempting to use a plain string literal as an action type in a reducer when `String(actionCreator)` is expected for type safety.
fixIn reducers, always use `String(actionCreator)` or `actionCreator.toString()` to obtain the action type string, ensuring type compatibility and leverage TypeScript's type inference.
TypeError: Cannot read properties of undefined (reading 'pending')
Trying to access `.pending`, `.fulfilled`, or `.rejected` properties on an action creator created with `createAction` (synchronous) instead of `createAsyncAction`.
fixEnsure that action creators meant to handle promises and their lifecycle states are created using `createAsyncAction`.
Promise rejected with a non-error: 'Your error message here'. Consider rejecting with an Error object to ensure `action.error` is true.
`redux-promise-middleware` by default expects promise rejections to be `Error` objects to set `action.error: true` for `_REJECTED` actions.
fixAlways reject promises with instances of `Error` (e.g., `Promise.reject(new Error('Failed!'))`). Alternatively, configure `redux-promise-middleware`'s `isError` option to handle custom error types. Audit
Dependencies
redux-promise-middlewarerequiredRequired for handling the promise lifecycle (pending, fulfilled, rejected) of asynchronous actions created by this library.