Registry / http-networking / redux-axios-middleware

redux-axios-middleware

library4.0.1jsnpmunverified

Redux Axios Middleware is a Redux middleware designed to streamline data fetching using the popular Axios HTTP client within Redux applications. The current stable version is 4.0.1, with the last major release (v4.0.0) in March 2017, indicating a very slow release cadence, suggesting it's feature-complete or in maintenance mode rather than active development. Its key differentiators include directly integrating Axios request configurations into Redux actions, managing the full lifecycle of HTTP requests (start, success, error) with configurable action types and suffixes, and enabling promise chaining on dispatched actions for sequential logic or advanced error handling. It also supports defining and using multiple Axios clients for different APIs within a single Redux store.

http-networking

npm install redux-axios-middleware

github ↗package ↗

INSTALL

IMPORT

SIG · REDUX-AXIOS-MIDDLE

redux-axios-middleware

http-networkingjavascriptv4.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

axiosMiddleware

✓ import axiosMiddleware from 'redux-axios-middleware';

✗ import { axiosMiddleware } from 'redux-axios-middleware'; // Is a default export

The primary middleware function is a default export from the package.

AxiosMiddlewareOptions

✓ import type { AxiosMiddlewareOptions } from 'redux-axios-middleware';

Use a type import for the options interface if working with TypeScript.

ReduxAxiosMiddleware (UMD)

✓ <script src="https://unpkg.com/redux-axios-middleware/dist/bundle.js"></script>

For browser environments using UMD, the middleware is exposed globally as `ReduxAxiosMiddleware`.

This quickstart demonstrates setting up `redux-axios-middleware` with a Redux store, configuring an Axios client, dispatching an action with a `payload.request` definition, and handling the resulting promise for success or failure.

import { createStore, applyMiddleware, combineReducers } from 'redux'; import axios from 'axios'; import axiosMiddleware from 'redux-axios-middleware'; // Create a basic Axios client instance const client = axios.create({ baseURL: 'https://api.example.com', responseType: 'json', timeout: 5000 }); // Define a placeholder reducer (required by createStore) const mockReducer = (state = {}, action) => { console.log('Dispatched action:', action.type, action.payload || action.error); return state; }; // Combine reducers (even if just one for demonstration) const reducers = combineReducers({ data: mockReducer }); // Create the Redux store with the middleware const store = createStore( reducers, applyMiddleware(axiosMiddleware(client)) ); // Action creator for loading categories export function loadCategories() { return { type: 'LOAD_CATEGORIES', payload: { request: { url: '/categories', method: 'GET' } } }; } // Dispatch the action and handle the promise store.dispatch(loadCategories()) .then(response => { console.log('Categories loaded successfully:', response.payload.data); }) .catch(error => { console.error('Failed to load categories:', error.error); }); // Example using `types` array for explicit action states export function submitForm(formData) { return { types: ['SUBMIT_FORM_REQUEST', 'SUBMIT_FORM_SUCCESS', 'SUBMIT_FORM_FAILURE'], payload: { request: { url: '/form-data', method: 'POST', data: formData } } }; } // Dispatch with custom types and chaining const myFormData = { name: 'Test', value: 123 }; store.dispatch(submitForm(myFormData)) .then(() => console.log('Form submitted successfully!')) .catch(error => console.error('Form submission failed:', error.error));

Debug

Known issues

breakingIn version 4.0.0, the `action` parameter passed to interceptors was replaced by a `getSourceAction` function. Direct access to the triggering action via `action` parameter will no longer work.

fix

Update interceptor functions to call `getSourceAction()` instead of directly using `action` parameter to retrieve the original action object.

affects: >=4.0.0

breakingVersion 3.0 introduced changes to the default action prefixing logic. If you relied on the default prefixes for request, success, or error actions, they might have changed.

fix

Review your action types and reducers that handle actions dispatched by the middleware. Adjust them to match the new default prefixing or explicitly configure `successSuffix` and `errorSuffix` in the middleware options.

affects: >=3.0.0

gotchaActions handled by `redux-axios-middleware` must contain a `payload.request` object defining the Axios request configuration. Actions without this structure will be ignored by the middleware.

fix

Ensure all actions intended for the middleware include `{ payload: { request: { url: ..., method: ... } } }`.

affects: >=0.1.0

gotchaThe middleware supports two action type definition patterns: a single `type` string (which will be suffixed by `_SUCCESS` or `_FAIL` by default) or an array of `types: [REQUEST_TYPE, SUCCESS_TYPE, FAILURE_TYPE]` for explicit control. Mixing these or misunderstanding their behavior can lead to incorrect action handling in reducers.

fix

Consistently use one pattern for defining action types. For fine-grained control, use the `types` array. Understand how suffixes (`_SUCCESS`, `_FAIL`) are applied when using a single `type` string.

affects: >=0.1.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'create')

Axios client was not provided as the first argument to `axiosMiddleware()` or was undefined.

fix

Ensure an initialized Axios instance is passed to the middleware: `axiosMiddleware(axios.create(...))`.

Action with payload.request but missing type or types array.

An action was dispatched with `payload.request` but lacked either a `type` string or a `types` array, making it impossible for the middleware to determine subsequent action types.

fix

Add either a `type: 'MY_ACTION_TYPE'` or `types: ['MY_REQUEST', 'MY_SUCCESS', 'MY_FAIL']` to your action object alongside `payload.request`.

Error: Reducers may not dispatch actions while another action is dispatching.

Attempting to dispatch a new action directly within a reducer that's handling an action from `redux-axios-middleware`. This typically happens when trying to chain actions or handle side effects in reducers.

fix

Handle side effects and subsequent dispatches using the promise returned by `store.dispatch()` when using `redux-axios-middleware`, or by using other Redux side-effect libraries (e.g., `redux-thunk`, `redux-saga`).

Upgrade

Version history

4.0.1latest on npm

Audit

Dependencies

axiosrequiredRequired peer dependency for performing HTTP requests.

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/svrcekmichal/redux-axios-middleware ↗

packagehttps://www.npmjs.com/package/redux-axios-middleware ↗