{"library":"redux-api-middleware","title":"Redux API Middleware","description":"Redux-api-middleware is a Redux middleware designed to standardize and simplify API calls within a Redux application. It processes actions adhering to the \"Redux Standard API-calling Action\" (RSAA) specification, identified by a special `[RSAA]` property. When such an action is dispatched, the middleware intercepts it, makes an HTTP request using the `fetch` API, and then dispatches a sequence of Flux Standard Actions (FSA) representing the request's lifecycle: `REQUEST`, `SUCCESS`, and `FAILURE`. This declarative approach helps manage loading states, error handling, and data fetching consistency. The current stable version is 3.2.1, with a history of regular updates and significant breaking changes in major versions (v2.0.0, v3.0.0). It relies on a global `fetch` implementation, requiring polyfills in environments like Node.js.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install redux-api-middleware"],"cli":null},"imports":["import { apiMiddleware } from 'redux-api-middleware';","import { RSAA } from 'redux-api-middleware';","import { createAction } from 'redux-api-middleware';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { createStore, applyMiddleware, combineReducers } from 'redux';\nimport { apiMiddleware, RSAA, createAction } from 'redux-api-middleware';\n\n// A simple reducer to handle API states\nconst initialState = {\n    data: null,\n    loading: false,\n    error: null,\n};\n\nfunction apiReducer(state = initialState, action: any) {\n    switch (action.type) {\n        case 'FETCH_USER_REQUEST':\n            return { ...state, loading: true, error: null };\n        case 'FETCH_USER_SUCCESS':\n            return { ...state, loading: false, data: action.payload };\n        case 'FETCH_USER_FAILURE':\n            return { ...state, loading: false, error: action.payload };\n        default:\n            return state;\n    }\n}\n\nconst rootReducer = combineReducers({\n    api: apiReducer,\n});\n\n// Configure the Redux store with the API middleware\n// Ensure 'fetch' is available globally (e.g., polyfilled for Node.js)\nconst store = createStore(rootReducer, applyMiddleware(apiMiddleware));\n\n// Define action types for the API call lifecycle\nconst FETCH_USER_REQUEST = 'FETCH_USER_REQUEST';\nconst FETCH_USER_SUCCESS = 'FETCH_USER_SUCCESS';\nconst FETCH_USER_FAILURE = 'FETCH_USER_FAILURE';\n\n// Create and dispatch an RSAA action to fetch a user\nconst fetchUser = (userId: string) => ({\n    [RSAA]: {\n        endpoint: `https://jsonplaceholder.typicode.com/users/${userId}`,\n        method: 'GET',\n        types: [\n            FETCH_USER_REQUEST,\n            FETCH_USER_SUCCESS,\n            FETCH_USER_FAILURE,\n        ],\n    },\n});\n\nconsole.log('Dispatching action to fetch user 1...');\nstore.dispatch(fetchUser('1'));\n\n// Example using the createAction helper (available since v3.2.0 for RSAA actions)\nconst fetchUserWithCreator = (userId: string) => createAction({\n    endpoint: `https://jsonplaceholder.typicode.com/users/${userId}`,\n    method: 'GET',\n    types: [FETCH_USER_REQUEST, FETCH_USER_SUCCESS, FETCH_USER_FAILURE],\n});\n\nconsole.log('Dispatching action to fetch user 2 using createAction...');\nstore.dispatch(fetchUserWithCreator('2'));\n\n// In a real application, you would connect components to the Redux store\n// to react to these state changes. For demonstration, we'll log the state.\nsetTimeout(() => {\n    console.log('Current state after API calls:', store.getState());\n}, 1000); // Wait for the async fetches to potentially complete","lang":"typescript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}