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.
apiMiddleware
✓ import { apiMiddleware } from 'redux-api-middleware';
✗ const { apiMiddleware } = require('redux-api-middleware');
This is the main middleware function to be applied to your Redux store using `applyMiddleware`.
RSAA
✓ import { RSAA } from 'redux-api-middleware';
✗ import { CALL_API } from 'redux-api-middleware';
`RSAA` is a string constant (`'[RSAA]'`) that identifies a Redux Standard API-calling Action. The `CALL_API` alias was deprecated in v2.0.0 and removed entirely in v3.0.0.
createAction
✓ import { createAction } from 'redux-api-middleware';
✗ import createAction from 'redux-api-middleware/lib/createAction';
A helper function for conveniently constructing RSAA actions. It simplifies defining the endpoint, method, and types for API calls.
This quickstart demonstrates how to set up `redux-api-middleware` in a Redux store, define an RSAA action for an API call, and dispatch it to manage fetching data and updating state.
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { apiMiddleware, RSAA, createAction } from 'redux-api-middleware';
// A simple reducer to handle API states
const initialState = {
data: null,
loading: false,
error: null,
};
function apiReducer(state = initialState, action: any) {
switch (action.type) {
case 'FETCH_USER_REQUEST':
return { ...state, loading: true, error: null };
case 'FETCH_USER_SUCCESS':
return { ...state, loading: false, data: action.payload };
case 'FETCH_USER_FAILURE':
return { ...state, loading: false, error: action.payload };
default:
return state;
}
}
const rootReducer = combineReducers({
api: apiReducer,
});
// Configure the Redux store with the API middleware
// Ensure 'fetch' is available globally (e.g., polyfilled for Node.js)
const store = createStore(rootReducer, applyMiddleware(apiMiddleware));
// Define action types for the API call lifecycle
const FETCH_USER_REQUEST = 'FETCH_USER_REQUEST';
const FETCH_USER_SUCCESS = 'FETCH_USER_SUCCESS';
const FETCH_USER_FAILURE = 'FETCH_USER_FAILURE';
// Create and dispatch an RSAA action to fetch a user
const fetchUser = (userId: string) => ({
[RSAA]: {
endpoint: `https://jsonplaceholder.typicode.com/users/${userId}`,
method: 'GET',
types: [
FETCH_USER_REQUEST,
FETCH_USER_SUCCESS,
FETCH_USER_FAILURE,
],
},
});
console.log('Dispatching action to fetch user 1...');
store.dispatch(fetchUser('1'));
// Example using the createAction helper (available since v3.2.0 for RSAA actions)
const fetchUserWithCreator = (userId: string) => createAction({
endpoint: `https://jsonplaceholder.typicode.com/users/${userId}`,
method: 'GET',
types: [FETCH_USER_REQUEST, FETCH_USER_SUCCESS, FETCH_USER_FAILURE],
});
console.log('Dispatching action to fetch user 2 using createAction...');
store.dispatch(fetchUserWithCreator('2'));
// In a real application, you would connect components to the Redux store
// to react to these state changes. For demonstration, we'll log the state.
setTimeout(() => {
console.log('Current state after API calls:', store.getState());
}, 1000); // Wait for the async fetches to potentially complete
Errors
Common errors & fixes
TypeError: fetch is not a function
The runtime environment (e.g., Node.js, older browsers) does not have the global `fetch` API available, and no polyfill has been provided. `redux-api-middleware` relies on this global function since v2.0.0.
fixInstall and import a `fetch` polyfill. For Node.js, `npm install node-fetch` then `import 'node-fetch/polyfill';` (or `require('node-fetch/polyfill');`). For older browsers, `npm install whatwg-fetch` then `import 'whatwg-fetch';`. Property '[CALL_API]' does not exist on type '{ ... }' (TypeScript error)
Attempting to use the `CALL_API` symbol as the action key in TypeScript, which was replaced by `RSAA` and removed in v3.0.0.
fixChange the action key from `[CALL_API]` to `[RSAA]` in your Redux Standard API-calling Actions.
Middleware must not return a Promise on actions without RSAA properties
This error can occur if a non-RSAA action is dispatched and the middleware's internal logic (potentially an older version or specific setup) incorrectly processes it as if it were an API call, leading to an unexpected Promise return. This was specifically addressed in v2.2.0.
fixEnsure that only actions intended for `redux-api-middleware` contain the `[RSAA]` property. If dispatching regular actions, confirm they do not inadvertently match the RSAA pattern. Consider upgrading to `v2.2.0` or later if you encounter this with valid non-RSAA actions.
Audit
Dependencies
reduxrequiredCore library for Redux state management. `redux-api-middleware` is designed to be used within a Redux store's middleware chain.
whatwg-fetchoptional`redux-api-middleware` depends on a global `fetch` API. `whatwg-fetch` is a common polyfill for browser environments that lack native `fetch` support. This dependency became mandatory from v2.0.0 onwards.
node-fetchoptional`redux-api-middleware` depends on a global `fetch` API. `node-fetch` is a common polyfill for Node.js environments where `fetch` is not natively available. This dependency became mandatory from v2.0.0 onwards.