{"id":18732,"library":"redux-promise","title":"Redux Promise Middleware","description":"FSA-compliant promise middleware for Redux (v0.6.0). It intercepts actions with a promise as the payload or the action itself as a promise. When the promise resolves, it dispatches a copy of the action with the resolved value and status 'success'; on rejection, it dispatches with the rejected value and status 'error'. The middleware returns a promise to the caller, useful for server-side rendering. It is part of the redux-utilities suite and works seamlessly with redux-actions. Built on the Flux Standard Action (FSA) spec, it requires actions to have a 'type' and optionally 'payload', 'error', and 'meta'. Compatible with all Redux versions. Stable, rarely updated, no known breaking changes since initial release.","status":"active","version":"0.6.0","language":"javascript","source_language":"en","source_url":"https://github.com/redux-utilities/redux-promise","tags":["javascript","redux","promise","middleware","redux-middleware","fsa","flux"],"install":[{"cmd":"npm install redux-promise","lang":"bash","label":"npm"},{"cmd":"yarn add redux-promise","lang":"bash","label":"yarn"},{"cmd":"pnpm add redux-promise","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; designed to be used with Redux store","package":"redux","optional":false},{"reason":"Implements middleware based on FSA spec; actions must follow FSA shape","package":"flux-standard-action","optional":true}],"imports":[{"note":"Default export is the middleware function; named import not available. CommonJS require returns the function directly (not an object).","wrong":"const { promiseMiddleware } = require('redux-promise')","symbol":"promiseMiddleware","correct":"import promiseMiddleware from 'redux-promise'"},{"note":"CommonJS works but ensure you assign to a variable, not destructure. redux-actions is optional.","wrong":"const { createAction } = require('redux-actions'); const promiseMiddleware = require('redux-promise')","symbol":"promiseMiddleware (with redux-actions)","correct":"import { createAction } from 'redux-actions'; import promiseMiddleware from 'redux-promise'"},{"note":"Must pass middleware via applyMiddleware; direct passing will break store creation.","wrong":"import promiseMiddleware from 'redux-promise'; const store = createStore(reducer, promiseMiddleware)","symbol":"applyMiddleware (Redux)","correct":"import { createStore, applyMiddleware } from 'redux'; import promiseMiddleware from 'redux-promise'; const store = createStore(reducer, applyMiddleware(promiseMiddleware))"}],"quickstart":{"code":"import { createStore, applyMiddleware } from 'redux';\nimport promiseMiddleware from 'redux-promise';\n\nconst reducer = (state = {}, action) => {\n  switch (action.type) {\n    case 'FETCH_USER_SUCCESS':\n      return { ...state, user: action.payload };\n    default:\n      return state;\n  }\n};\n\nconst store = createStore(\n  reducer,\n  applyMiddleware(promiseMiddleware)\n);\n\n// Action creator returning FSA action with promise payload\nconst fetchUser = (id) => ({\n  type: 'FETCH_USER',\n  payload: fetch(`https://reqres.in/api/users/${id}`).then(res => res.json())\n});\n\nstore.dispatch(fetchUser(1)).then(() => {\n  console.log(store.getState()); // { user: { id: 1, ... } }\n});","lang":"javascript","description":"Demonstrates setup of Redux store with promiseMiddleware, a reducer handling the resolved action, and dispatching an async action with a promise payload."},"warnings":[{"fix":"For rejection handling, ensure the action payload is a promise and the action does not have 'error: true' initially (middleware sets it). Use try-catch in createAction or handle errors in reducer via 'status: error'.","message":"Middleware only dispatches on promise resolution, not on rejection unless the action has an error flag.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure all previous middleware in the chain return the value of next(action) (or next(action) itself) to propagate the promise.","message":"Middleware returns the original promise; if other middleware do not return next() result, the promise chain may break.","severity":"gotcha","affected_versions":">=0.4.0"},{"fix":"If you relied on the initial dispatch (e.g., for loading state), add a separate loading action before the promise action.","message":"In v0.6.0, the middleware no longer dispatches the initial action for promise payloads; only success/error.","severity":"breaking","affected_versions":">=0.6.0"},{"fix":"Consider migrating to Redux Toolkit's createAsyncThunk or RTK Query for better async handling and TypeScript support.","message":"The library is no longer actively maintained; last release 2019.","severity":"deprecated","affected_versions":">=0.5.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure you pass the middleware to createStore via applyMiddleware: createStore(reducer, applyMiddleware(promiseMiddleware))","cause":"The middleware is not applied or the promise action is dispatched before applyMiddleware is used.","error":"Uncaught Error: Actions must be plain objects. Use custom middleware for async actions."},{"fix":"Verify your action creator returns an object with 'type' and 'payload' set to a thenable (promise).","cause":"Action payload is not a promise or the action is malformed (missing type or payload is not a promise).","error":"TypeError: Cannot read property 'then' of undefined"},{"fix":"Either dispatch an action with promise payload, or use a different middleware like redux-thunk for direct promise dispatching.","cause":"A non-FSA action (e.g., direct promise) was dispatched without wrapping in an FSA action.","error":"Actions must be plain objects. Use custom middleware for async actions."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}