{"library":"redux-promise-middleware-actions","title":"Redux Action Creators for Promises","description":"This library provides action creators designed to streamline the creation of synchronous and asynchronous Redux actions, specifically integrating with `redux-promise-middleware`. It is currently stable at version 3.1.0, and while its explicit release cadence is not specified, ongoing build status indicators suggest active maintenance. A key differentiator is its robust first-class TypeScript support, which requires TypeScript 3 or newer for version 3 of the library, and TypeScript 2 for version 1. It simplifies the process of creating async actions by automatically generating `_PENDING`, `_FULFILLED`, and `_REJECTED` actions when a promise is dispatched, thereby eliminating the need for manual action type enums. The library promotes type safety in reducers by allowing action creators to be directly referenced (e.g., `String(myAction)`) and boasts a tiny bundle size, making it a lightweight alternative focused on promise-based Redux flows without external dependencies beyond `redux-promise-middleware` itself.","language":"javascript","status":"active","last_verified":"Thu Apr 23","install":{"commands":["npm install redux-promise-middleware-actions"],"cli":null},"imports":["import { createAction } from 'redux-promise-middleware-actions';","import { createAsyncAction } from 'redux-promise-middleware-actions';","case String(myActionCreator.fulfilled): // in a reducer"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { createStore, applyMiddleware, compose } from 'redux';\nimport promiseMiddleware from 'redux-promise-middleware';\nimport { createAsyncAction } from 'redux-promise-middleware-actions';\n\n// 1. Setup Redux store with promiseMiddleware\n// Ensure Redux DevTools compatibility if available\nconst composeEnhancers = (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;\n\n// A simple reducer to handle our async action states\nconst rootReducer = (state = { data: null, loading: false, error: null }, action) => {\n  switch (String(action.type)) { // Use String(action.type) for type matching\n    case String(fetchData.pending): // Action.type for pending actions is usually the base type + _PENDING suffix\n      return { ...state, loading: true, error: null };\n    case String(fetchData.fulfilled): // For fulfilled, payload is the resolved promise value\n      return { ...state, loading: false, data: action.payload };\n    case String(fetchData.rejected): // For rejected, payload is the error object\n      return { ...state, loading: false, error: action.payload };\n    default:\n      return state;\n  }\n};\n\nconst store = createStore(\n  rootReducer,\n  composeEnhancers(applyMiddleware(promiseMiddleware))\n);\n\n// 2. Create an async action\nexport const fetchData = createAsyncAction('FETCH_DATA', async (id) => {\n  // Simulate an asynchronous operation (e.g., an API call)\n  console.log(`Fetching data for ID: ${id}...`);\n  const response = await new Promise(resolve => {\n    setTimeout(() => {\n      if (id === 1) {\n        resolve({ id, value: 'sample data successfully fetched' });\n      } else {\n        throw new Error(`Failed to fetch data for ID: ${id}`);\n      }\n    }, 1000);\n  });\n  return response;\n});\n\n// 3. Dispatch the async action\nconsole.log('--- Dispatching fetchData(1) (success) ---');\nstore.dispatch(fetchData(1));\n\n// Observe state changes over time (for demonstration)\nconst unsubscribe = store.subscribe(() => {\n  console.log('Current state:', store.getState());\n});\n\n// Dispatch another action after a short delay to demonstrate error handling\nsetTimeout(() => {\n  console.log('\\n--- Dispatching fetchData(2) (failure) ---');\n  store.dispatch(fetchData(2));\n}, 3000);\n\n// Clean up subscription after demonstration\nsetTimeout(() => {\n  unsubscribe();\n  console.log('\\nDemonstration complete.');\n}, 5000);\n","lang":"typescript","description":"This quickstart demonstrates how to configure a Redux store with `redux-promise-middleware` and use `redux-promise-middleware-actions` to create and dispatch an asynchronous action, showing how the reducer handles `_PENDING`, `_FULFILLED`, and `_REJECTED` states.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}