{"id":17463,"library":"redux-axios-middleware","title":"Redux Axios Middleware","description":"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.","status":"maintenance","version":"4.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/svrcekmichal/redux-axios-middleware","tags":["javascript","typescript"],"install":[{"cmd":"npm install redux-axios-middleware","lang":"bash","label":"npm"},{"cmd":"yarn add redux-axios-middleware","lang":"bash","label":"yarn"},{"cmd":"pnpm add redux-axios-middleware","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for performing HTTP requests.","package":"axios","optional":false}],"imports":[{"note":"The primary middleware function is a default export from the package.","wrong":"import { axiosMiddleware } from 'redux-axios-middleware'; // Is a default export","symbol":"axiosMiddleware","correct":"import axiosMiddleware from 'redux-axios-middleware';"},{"note":"Use a type import for the options interface if working with TypeScript.","symbol":"AxiosMiddlewareOptions","correct":"import type { AxiosMiddlewareOptions } from 'redux-axios-middleware';"},{"note":"For browser environments using UMD, the middleware is exposed globally as `ReduxAxiosMiddleware`.","symbol":"ReduxAxiosMiddleware (UMD)","correct":"<script src=\"https://unpkg.com/redux-axios-middleware/dist/bundle.js\"></script>"}],"quickstart":{"code":"import { createStore, applyMiddleware, combineReducers } from 'redux';\nimport axios from 'axios';\nimport axiosMiddleware from 'redux-axios-middleware';\n\n// Create a basic Axios client instance\nconst client = axios.create({\n  baseURL: 'https://api.example.com',\n  responseType: 'json',\n  timeout: 5000\n});\n\n// Define a placeholder reducer (required by createStore)\nconst mockReducer = (state = {}, action) => {\n  console.log('Dispatched action:', action.type, action.payload || action.error);\n  return state;\n};\n\n// Combine reducers (even if just one for demonstration)\nconst reducers = combineReducers({\n  data: mockReducer\n});\n\n// Create the Redux store with the middleware\nconst store = createStore(\n  reducers,\n  applyMiddleware(axiosMiddleware(client))\n);\n\n// Action creator for loading categories\nexport function loadCategories() {\n  return {\n    type: 'LOAD_CATEGORIES',\n    payload: {\n      request: {\n        url: '/categories',\n        method: 'GET'\n      }\n    }\n  };\n}\n\n// Dispatch the action and handle the promise\nstore.dispatch(loadCategories())\n  .then(response => {\n    console.log('Categories loaded successfully:', response.payload.data);\n  })\n  .catch(error => {\n    console.error('Failed to load categories:', error.error);\n  });\n\n// Example using `types` array for explicit action states\nexport function submitForm(formData) {\n  return {\n    types: ['SUBMIT_FORM_REQUEST', 'SUBMIT_FORM_SUCCESS', 'SUBMIT_FORM_FAILURE'],\n    payload: {\n      request: {\n        url: '/form-data',\n        method: 'POST',\n        data: formData\n      }\n    }\n  };\n}\n\n// Dispatch with custom types and chaining\nconst myFormData = { name: 'Test', value: 123 };\nstore.dispatch(submitForm(myFormData))\n  .then(() => console.log('Form submitted successfully!'))\n  .catch(error => console.error('Form submission failed:', error.error));","lang":"typescript","description":"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."},"warnings":[{"fix":"Update interceptor functions to call `getSourceAction()` instead of directly using `action` parameter to retrieve the original action object.","message":"In 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.","severity":"breaking","affected_versions":">=4.0.0"},{"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.","message":"Version 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.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Ensure all actions intended for the middleware include `{ payload: { request: { url: ..., method: ... } } }`.","message":"Actions 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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"The 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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Ensure an initialized Axios instance is passed to the middleware: `axiosMiddleware(axios.create(...))`.","cause":"Axios client was not provided as the first argument to `axiosMiddleware()` or was undefined.","error":"TypeError: Cannot read properties of undefined (reading 'create')"},{"fix":"Add either a `type: 'MY_ACTION_TYPE'` or `types: ['MY_REQUEST', 'MY_SUCCESS', 'MY_FAIL']` to your action object alongside `payload.request`.","cause":"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.","error":"Action with payload.request but missing type or types array."},{"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`).","cause":"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.","error":"Error: Reducers may not dispatch actions while another action is dispatching."}],"ecosystem":"npm","meta_description":null}