redux-async-queue

import { createStore, applyMiddleware } from 'redux'; import ReduxAsyncQueue from 'redux-async-queue'; // Basic Redux reducer (e.g., in reducers/index.js) const initialState = { burgersMade: 0, burgerQueue: [] }; const reducer = (state = initialState, action) => { switch (action.type) { case 'MAKE_BURGER_COMPLETE': console.log(`Burger made: ${action.payload}`); return { ...state, burgersMade: state.burgersMade + 1, burgerQueue: [...state.burgerQueue, action.payload] }; default: return state; } }; // Create the Redux store with the async queue middleware const store = createStore( reducer, applyMiddleware(ReduxAsyncQueue) ); // Example function to simulate async ingredient fetching (e.g., an API call) function getIngredients(style) { console.log(`Getting ingredients for ${style} burger...`); return new Promise(resolve => { setTimeout(() => { console.log(`Ingredients ready for ${style} burger.`); resolve(`${style} burger`); }, Math.random() * 1500 + 500); // Simulate network delay }); } // Action creator for the actual burger making function makeBurgerComplete(burgerType) { return { type: 'MAKE_BURGER_COMPLETE', payload: burgerType, }; } // Action creator to add a burger to the queue function queueMakeBurger(style) { return { queue: 'BURGER_QUEUE', // Name of the queue callback: (next, dispatch, getState) => { console.log(`Starting to make a ${style} burger.`); getIngredients(style).then(burger => { dispatch(makeBurgerComplete(burger)); // Dispatch a regular Redux action next(); // IMPORTANT: Signal that this item in the queue is complete }); } }; } // Dispatch multiple actions to the queue console.log('Dispatching burger requests...'); store.dispatch(queueMakeBurger('Cheeseburger')); store.dispatch(queueMakeBurger('Bacon Burger')); store.dispatch(queueMakeBurger('Veggie Burger')); // Output current state after initial dispatches console.log('Current state:', store.getState()); // Example: Monitor store for changes store.subscribe(() => { console.log('Store updated:', store.getState().burgersMade, 'burgers made.'); });