{"id":17899,"library":"redux-async-queue","title":"Redux Async Queue Middleware","description":"redux-async-queue is a Redux middleware designed to manage the sequential execution of asynchronous actions. It allows developers to define multiple distinct queues, ensuring that actions belonging to a specific queue are processed one at a time, in the order they were dispatched. Each queued action dispatches a `callback` that receives `next`, `dispatch`, and `getState`, requiring an explicit call to `next()` to signal completion and allow the next item in the queue to proceed. This pattern is useful for operations that must be serialized, like sequential API calls or resource-intensive tasks that cannot run concurrently. The package is currently at version 1.0.0, suggesting a stable, though possibly no longer actively developed, state. Its differentiator lies in its explicit queue naming and manual progression mechanism, contrasting with more general-purpose async Redux patterns like thunks or sagas which handle concurrency differently or rely on more advanced paradigms. The library focuses solely on ordered async execution within a Redux store.","status":"maintenance","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/zackargyle/redux-async-queue","tags":["javascript","redux","queue","middleware","redux-middleware","flux"],"install":[{"cmd":"npm install redux-async-queue","lang":"bash","label":"npm"},{"cmd":"yarn add redux-async-queue","lang":"bash","label":"yarn"},{"cmd":"pnpm add redux-async-queue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This is a Redux middleware and requires Redux as a peer dependency for `applyMiddleware` and store integration.","package":"redux","optional":false}],"imports":[{"note":"The library exports a default function. Do not use named import syntax.","wrong":"import { ReduxAsyncQueue } from 'redux-async-queue';","symbol":"ReduxAsyncQueue","correct":"import ReduxAsyncQueue from 'redux-async-queue';"},{"note":"When using CommonJS `require`, the default export is accessed via the `.default` property due to transpilation from ES modules.","wrong":"const ReduxAsyncQueue = require('redux-async-queue');","symbol":"ReduxAsyncQueue (CommonJS)","correct":"const ReduxAsyncQueue = require('redux-async-queue').default;"},{"note":"Actions intended for the queue middleware must have a `queue` key (string) and a `callback` function. The `callback` must explicitly call `next()` to advance the queue.","symbol":"Queue Action Structure","correct":"const action = { queue: 'MY_QUEUE', callback: (next, dispatch, getState) => { /* ... */ next(); } };"}],"quickstart":{"code":"import { createStore, applyMiddleware } from 'redux';\nimport ReduxAsyncQueue from 'redux-async-queue';\n\n// Basic Redux reducer (e.g., in reducers/index.js)\nconst initialState = { burgersMade: 0, burgerQueue: [] };\nconst reducer = (state = initialState, action) => {\n  switch (action.type) {\n    case 'MAKE_BURGER_COMPLETE':\n      console.log(`Burger made: ${action.payload}`);\n      return { ...state, burgersMade: state.burgersMade + 1, burgerQueue: [...state.burgerQueue, action.payload] };\n    default:\n      return state;\n  }\n};\n\n// Create the Redux store with the async queue middleware\nconst store = createStore(\n  reducer,\n  applyMiddleware(ReduxAsyncQueue)\n);\n\n// Example function to simulate async ingredient fetching (e.g., an API call)\nfunction getIngredients(style) {\n  console.log(`Getting ingredients for ${style} burger...`);\n  return new Promise(resolve => {\n    setTimeout(() => {\n      console.log(`Ingredients ready for ${style} burger.`);\n      resolve(`${style} burger`);\n    }, Math.random() * 1500 + 500); // Simulate network delay\n  });\n}\n\n// Action creator for the actual burger making\nfunction makeBurgerComplete(burgerType) {\n  return {\n    type: 'MAKE_BURGER_COMPLETE',\n    payload: burgerType,\n  };\n}\n\n// Action creator to add a burger to the queue\nfunction queueMakeBurger(style) {\n  return {\n    queue: 'BURGER_QUEUE', // Name of the queue\n    callback: (next, dispatch, getState) => {\n      console.log(`Starting to make a ${style} burger.`);\n      getIngredients(style).then(burger => {\n        dispatch(makeBurgerComplete(burger)); // Dispatch a regular Redux action\n        next(); // IMPORTANT: Signal that this item in the queue is complete\n      });\n    }\n  };\n}\n\n// Dispatch multiple actions to the queue\nconsole.log('Dispatching burger requests...');\nstore.dispatch(queueMakeBurger('Cheeseburger'));\nstore.dispatch(queueMakeBurger('Bacon Burger'));\nstore.dispatch(queueMakeBurger('Veggie Burger'));\n\n// Output current state after initial dispatches\nconsole.log('Current state:', store.getState());\n\n// Example: Monitor store for changes\nstore.subscribe(() => {\n  console.log('Store updated:', store.getState().burgersMade, 'burgers made.');\n});","lang":"javascript","description":"This quickstart demonstrates how to set up `redux-async-queue` with a Redux store, define actions with a `queue` key and `callback`, and dispatch multiple asynchronous operations that will execute sequentially. It showcases the crucial `next()` call to advance the queue."},"warnings":[{"fix":"Use `const ReduxAsyncQueue = require('redux-async-queue').default;` for CommonJS environments.","message":"When importing the middleware using CommonJS `require`, developers must access the `.default` property. Failing to do so will result in `TypeError: ReduxAsyncQueue is not a function` because the module's top-level export is the ES module wrapper, not the function itself.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure `next()` is called at the appropriate point within your `callback` function, typically after the async operation completes successfully.","message":"The `callback` function provided in a queued action *must* explicitly call `next()` to signal completion of the current asynchronous task. If `next()` is not called, the queue will halt indefinitely, and subsequent actions in that queue will never execute.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consider alternatives like `redux-thunk` (for simple async flows), `redux-saga` (for complex, side-effect heavy workflows), or `redux-observable` for reactive programming patterns, particularly if starting a new project with Redux Toolkit.","message":"The library's approach to async action management is somewhat foundational. With the evolution of Redux and the rise of Redux Toolkit, which integrates `redux-thunk` by default and has strong support for `redux-saga` or `redux-observable`, this middleware might not be the most idiomatic or integrated choice for new projects, especially those using Redux Toolkit. It represents an older pattern for managing sequential async operations.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Evaluate the package's GitHub repository for recent activity. For new projects, prefer actively maintained solutions. For existing projects, thoroughly test with new Redux versions.","message":"The package appears to be in maintenance mode or abandoned, with version 1.0.0 being the only or final major release documented. This suggests a lack of active development, potential compatibility issues with very recent Redux versions or TypeScript evolutions, and no new features or bug fixes. Security updates are unlikely.","severity":"deprecated","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":"Change `const ReduxAsyncQueue = require('redux-async-queue');` to `const ReduxAsyncQueue = require('redux-async-queue').default;`","cause":"Attempting to use `require('redux-async-queue')` directly in CommonJS without accessing the default export.","error":"TypeError: ReduxAsyncQueue is not a function"},{"fix":"Ensure `next()` is called after your asynchronous operation completes within the `callback`: `callback: (next, dispatch, getState) => { asyncOperation().then(() => { dispatch(someAction()); next(); }); }`","cause":"The `next()` callback was not invoked within the `callback` function of a queued action, preventing the queue from advancing.","error":"My Redux async actions are not executing in order or are getting stuck after the first one."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}