{"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.","language":"javascript","status":"maintenance","last_verified":"Thu Apr 23","install":{"commands":["npm install redux-async-queue"],"cli":null},"imports":["import ReduxAsyncQueue from 'redux-async-queue';","const ReduxAsyncQueue = require('redux-async-queue').default;","const action = { queue: 'MY_QUEUE', callback: (next, dispatch, getState) => { /* ... */ next(); } };"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}