{"library":"redux-promise-middleware","title":"Redux Promise Middleware","description":"Redux Promise Middleware is a Redux middleware that simplifies the handling of asynchronous actions by transforming actions containing Promises into a series of pending, fulfilled, and rejected actions. This allows for clear separation of concerns in Redux applications, enabling robust state management during async operations. The current stable version is 6.2.0, which includes support for Redux 5.0.0 and earlier versions. The library maintains an active release cadence, addressing bugs, improving TypeScript definitions, and ensuring compatibility with newer Redux versions. Key differentiators include its ability to work seamlessly with Redux Thunk for complex action chaining and its configurable action type delimiters, providing granular control over action naming conventions for lifecycle events.","language":"javascript","status":"active","last_verified":"Thu Apr 23","install":{"commands":["npm install redux-promise-middleware"],"cli":null},"imports":["import promiseMiddleware from 'redux-promise-middleware'","import promiseMiddleware from 'redux-promise-middleware'\n// Use promiseMiddleware directly, no need to call a creator function anymore","import type { ActionType } from 'redux-promise-middleware'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { createStore, applyMiddleware, combineReducers } from 'redux';\nimport promiseMiddleware from 'redux-promise-middleware';\n\n// A simple reducer\nconst dataReducer = (state = { data: null, loading: false, error: null }, action) => {\n  switch (action.type) {\n    case 'FETCH_DATA_PENDING':\n      return { ...state, loading: true, error: null };\n    case 'FETCH_DATA_FULFILLED':\n      return { ...state, loading: false, data: action.payload };\n    case 'FETCH_DATA_REJECTED':\n      return { ...state, loading: false, error: action.payload };\n    default:\n      return state;\n  }\n};\n\nconst rootReducer = combineReducers({\n  data: dataReducer,\n});\n\n// Create the Redux store with promiseMiddleware\nconst store = createStore(rootReducer, applyMiddleware(promiseMiddleware));\n\n// An async action creator\nconst fetchData = () => ({\n  type: 'FETCH_DATA',\n  payload: new Promise((resolve, reject) => {\n    setTimeout(() => {\n      const success = Math.random() > 0.5;\n      if (success) {\n        resolve('Hello from async data!');\n      } else {\n        reject(new Error('Failed to fetch data.'));\n      }\n    }, 1000);\n  }),\n});\n\nconsole.log('Initial state:', store.getState());\n\nstore.dispatch(fetchData());\n\nstore.subscribe(() => {\n  console.log('Current state:', store.getState());\n});\n","lang":"typescript","description":"This quickstart demonstrates how to set up `redux-promise-middleware` with a basic Redux store, defining an async action and a reducer to handle its pending, fulfilled, and rejected states.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}