{"id":17910,"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.","status":"active","version":"6.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/pburtchaell/redux-promise-middleware","tags":["javascript","redux","middleware","middlewares","promise","promises","optimistic update","optimistic updates","async","typescript"],"install":[{"cmd":"npm install redux-promise-middleware","lang":"bash","label":"npm"},{"cmd":"yarn add redux-promise-middleware","lang":"bash","label":"yarn"},{"cmd":"pnpm add redux-promise-middleware","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for Redux applications, required for applying the middleware.","package":"redux","optional":false}],"imports":[{"note":"Since v6.0.0, the default export is the preconfigured middleware function itself. Older versions (pre-v6) required `promiseMiddleware()` to be called.","wrong":"import { promiseMiddleware } from 'redux-promise-middleware'","symbol":"promiseMiddleware","correct":"import promiseMiddleware from 'redux-promise-middleware'"},{"note":"Pre-v6.0.0, the middleware was instantiated via `promiseMiddleware({ /* config */ })`. Since v6.0.0, the default export is the already-instantiated middleware, simplifying usage and removing the need for a creator function explicitly named `createPromiseMiddleware`.","wrong":"import { createPromiseMiddleware } from 'redux-promise-middleware'","symbol":"createPromiseMiddleware","correct":"import promiseMiddleware from 'redux-promise-middleware'\n// Use promiseMiddleware directly, no need to call a creator function anymore"},{"note":"This is a TypeScript type import. Ensure you use `import type` if your TypeScript version supports it, or `import { ActionType } from 'redux-promise-middleware'` if not.","wrong":"import { ActionType } from 'redux-promise-middleware'","symbol":"ActionType","correct":"import type { ActionType } from 'redux-promise-middleware'"}],"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."},"warnings":[{"fix":"Remove the function call when importing: change `applyMiddleware(promiseMiddleware())` to `applyMiddleware(promiseMiddleware)`.","message":"The default export changed from a middleware factory function to the preconfigured middleware itself. You no longer call `promiseMiddleware()` when applying it.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Update your middleware configuration object: change `promiseTypeSeparator: '/'` to `promiseTypeDelimiter: '/'`.","message":"The configuration property `promiseTypeSeparator` was renamed to `promiseTypeDelimiter` for improved semantic accuracy.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Ensure you are using `redux-promise-middleware@6.1.3` or later for the most stable TypeScript experience.","message":"Early versions of v6.x had issues with TypeScript definitions not being correctly published or having incorrect typings for `ActionType`.","severity":"gotcha","affected_versions":">=6.0.0 <6.1.3"},{"fix":"When dispatching a promise action in a thunk, store the result (`const response = dispatch(action)`) and then use `response.then()` or `response.catch()` for subsequent logic or error handling.","message":"When combining with Redux Thunk, dispatching the promise action will return the promise itself. This allows chaining further actions, but be mindful of error handling in the chain.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"fix":"Remove the function call. The v6+ default export is the middleware directly: `applyMiddleware(promiseMiddleware)`.","cause":"Attempting to call the `promiseMiddleware` default export as a function (e.g., `promiseMiddleware()`) when using v6.0.0 or later.","error":"TypeError: (0 , _reduxPromiseMiddleware.default) is not a function"},{"fix":"Ensure the action you are dispatching has a `payload` that is a valid Promise object. Check your action creators for correct structure.","cause":"This generic Redux error can occur if `redux-promise-middleware` doesn't correctly process an action, often because the `payload` is not a promise, or the action structure is incorrect, leading to the middleware not generating the expected pending/fulfilled/rejected types.","error":"Error: Actions may not have an undefined 'type' property. Have you misspelled a constant?"},{"fix":"Rename `promiseTypeSeparator` to `promiseTypeDelimiter` in your middleware configuration object.","cause":"Using the old `promiseTypeSeparator` configuration option in v5.0.0 or later, which was renamed.","error":"Property 'promiseTypeSeparator' does not exist on type 'PromiseMiddlewareOptions'. Did you mean 'promiseTypeDelimiter'?"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}