{"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.","language":"javascript","status":"maintenance","last_verified":"Wed Apr 22","install":{"commands":["npm install redux-axios-middleware"],"cli":null},"imports":["import axiosMiddleware from 'redux-axios-middleware';","import type { AxiosMiddlewareOptions } from 'redux-axios-middleware';","<script src=\"https://unpkg.com/redux-axios-middleware/dist/bundle.js\"></script>"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}