Async queue middleware for Redux

Related tags

Redux Tools redux-async-queue
Overview

Redux Async Queue

Async queue middleware for Redux.

npm install --save redux-async-queue

If you used ES modules

import ReduxAsyncQueue from 'redux-async-queue' // no changes here 😀

If you use CommonJS

var ReduxAsyncQueue = require('redux-async-queue').default

If you need a UMD version

var ReduxAsyncQueue = window.ReduxAsyncQueue.default

What is it?

ReduxAsyncQueue middleware makes queueing redux actions painless. This allows you to fire multiple actions simultaneously and have them execute asynchronously in order.

The middleware will search for any action that has the queue property. It will then add the callback function to the corresponding queue. The queue key specifies to which queue this callback belongs. You may have several different queues for any given application.

For example, let's say we are making burgers (because they're delicious!). We can only make one burger at a time, but our friends keep coming up and saying they want one. You have 10 requests, but can only make one at a time. Here is how we'd write that delicious example out with the ReduxAsyncQueue middleware.

// This is the name of the queue.  This does not need to match the action 'type' in 'makeBurger()'
// You could for example call this `MAKE_FOOD` if you were also going to be cooking up some
// sweet potato fries and wanted them in the same queue even though they are different actions.
const MAKE_BURGER = 'MAKE_BURGER';

function makeBurger(ingredients) {
  return {
    type: MAKE_BURGER,
    payload: ingredients,
  };
}

function queueMakeBurger(burgerStyle) {
  return {
    queue: MAKE_BURGER,
    callback: (next, dispatch, getState) => {
      getIngredients(burgerStyle).then(ingredients => {
        dispatch(makeBurger(ingredients));
        next();
      });
    }
  }
}

// Call the queue from your container / smart component
dispatch(queueMakeBurger(burgerStyle));

You'll notice the next() call within callback. That is the key to letting ReduxAsyncQueue know that you are ready to start making the next burger. If you do not call next() then the queue will not work.

Installation

npm install --save redux-async-queue

To enable ReduxAsyncQueue, use applyMiddleware():

import { createStore, applyMiddleware } from 'redux';
import ReduxAsyncQueue from 'redux-async-queue';
import reducer from './reducers/index';

const store = createStore(
  reducer,
  applyMiddleware(ReduxAsyncQueue)
);

License

MIT

You might also like...
Official React bindings for Redux

React Redux Official React bindings for Redux. Performant and flexible. Installation Using Create React App The recommended way to start new apps with

Redux 22.5k Jan 1, 2023
DevTools for Redux with hot reloading, action replay, and customizable UI
DevTools for Redux with hot reloading, action replay, and customizable UI

Redux DevTools Developer Tools to power-up Redux development workflow or any other architecture which handles the state change (see integrations). It

Redux 13.3k Jan 2, 2023
Ruthlessly simple bindings to keep react-router and redux in sync

Project Deprecated This project is no longer maintained. For your Redux - Router syncing needs with React Router 4+, please see one of these librari

React Community 7.9k Dec 30, 2022
The official, opinionated, batteries-included toolset for efficient Redux development

Redux Toolkit The official, opinionated, batteries-included toolset for efficient Redux development (Formerly known as "Redux Starter Kit") Installati

Redux 8.9k Dec 31, 2022
Logger for Redux
Logger for Redux

Logger for Redux Now maintained by LogRocket! LogRocket is a production Redux logging tool that lets you replay problems as if they happened in your o

null 5.7k Jan 1, 2023
Selector library for Redux

Reselect Simple “selector” library for Redux (and others) inspired by getters in NuclearJS, subscriptions in re-frame and this proposal from speedskat

Redux 18.8k Dec 27, 2022
An alternative side effect model for Redux apps
An alternative side effect model for Redux apps

redux-saga redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like acce

Redux-Saga 22.4k Jan 5, 2023
Declarative Side Effects for Redux
Declarative Side Effects for Redux

Redux Data FX Declarative Side Effects for Redux. It helps you keep your business logic and effectful code separate. The idea is simple: in addition o

Matthieu BĂ©teille 53 Jun 30, 2021
:recycle: higher order reducer to add undo/redo functionality to redux state containers
:recycle: higher order reducer to add undo/redo functionality to redux state containers

redux undo/redo simple undo/redo functionality for redux state containers Protip: Check out the todos-with-undo example or the redux-undo-boilerplate

Daniel Bugl 2.8k Jan 1, 2023
Comments
  • Suggestions for readme update

    Suggestions for readme update

    Hey man,

    loved this library, works really well but I did have a bit of trouble getting it working initially.

    I've added a couple of changes to the readme that would have made it clearer for me, feel free to ditch this PR if you don't think they'll add merit.

    Thanks for putting this together :)

    opened by DaveOrDead 1
  • How to tell if the queue is empty

    How to tell if the queue is empty

    Is there a way to peek into the queue to see if it is empty? I have a use case that if there is something in the queue I should skip handling the result from previous action and do the next() right away.

    opened by daviddywang 1
  • Manage loader for X components

    Manage loader for X components

    Hi,

    It's possible to display a loader for the current action in component who is currently called?

    For example:

    render() {
  <div>
    {/* display a loader when the ajax/interval is in the queue */}
    <button onClick={this.props.addToQueue} />
  </div>
}

    When addToQueue is called we show a loader component for the current component clicked. So, like that we can view in real time what is happening in the view.

    1. I click on the first item
    2. I see a loader in that component, the request is still in queue (20s)
    3. I click on other item, the first action is not finished yet, so we add the current one in the queue (20s)
    4. I see 2 loader in 2 component during the request is finished.
    opened by rtransat 0
  • How to write unit tests for async actions creators after applying this redux-async-queue middleware

    How to write unit tests for async actions creators after applying this redux-async-queue middleware

    How to write unit tests for async actions creators after applying this redux-async-queue middleware? I tried to apply this middleware to my project, it did resolve the problem of many async requests out of control elegantly, but I found unit tests became difficult to write. Could someone give me a hint??

    opened by Jekin6 0
Owner
Zack Argyle
Zack Argyle
GitHub
RxJS middleware for action side effects in Redux using "Epics"

RxJS-based middleware for Redux. Compose and cancel async actions to create side effects and more. https://redux-observable.js.org Install This has pe

redux-observable 7.8k Jan 6, 2023
Analytics middleware for Redux

redux-analytics Analytics middleware for Redux. $ npm install --save redux-analytics Want to customise your metadata further? Check out redux-tap. Usa

Mark Dalgleish 490 Aug 5, 2022
Redux Tutorial - share my experience regarding redux, react-redux and redux-toolkit

Redux Tutorial 1. Introduction to Redux 1.1 What is Redux & why Redux? A small JS Library for managing medium/large amount of states globally in your

Anisul Islam 36 Dec 29, 2022
Skeleton React App configured with Redux store along with redux-thunk, redux persist and form validation using formik and yup

Getting Started with React-Redux App Some Configrations Needed You guys need to modify the baseUrl (path to your server) in the server.js file that is

Usama Sarfraz 11 Jul 10, 2022
A Higher Order Component using react-redux to keep form state in a Redux store

redux-form You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of Redux

Redux Form 12.6k Jan 3, 2023
redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state.

redux-immutable redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state. When Redux creat

Gajus Kuizinas 1.9k Dec 30, 2022
A chart monitor for Redux DevTools https://www.npmjs.com/package/redux-devtools-chart-monitor

Redux DevTools Chart Monitor This package was merged into redux-devtools monorepo. Please refer to that repository for the latest updates, issues and

Redux 293 Nov 13, 2022
A simple app for study react with redux, redux saga and typescript.

React com Redux, Redux-Saga e TypeScript. ?? Uma aplicação simple para entender o funcionamento do Redux e a melhor maneira de utiliza-lo junto com o

JoĂŁo Marcos Belanga 1 May 24, 2022
Redux - Create forms using Redux And React

Exercício de fixação Vamos criar formulårios utilizando Redux! \o/ Antes de inic

MĂĄrcio JĂșnior 2 Jul 21, 2022
A lightweight state management library for react inspired by redux and react-redux

A lightweight state management library for react inspired by redux and react-redux

null 2 Sep 9, 2022