ptzagk / redux-queue

Higher order reducer to handle execution order of actions

Redux-Queue

Higher order reducer so you don't have to worry about order of arrival of the results of your actions.

Installation

Using Yarn:

yarn add redux-queue

In your reducers.js (or where you combine your reducers), wrap it:

import Queue from 'redux-queue';
import MyReducer from './my_reducer';

MyReducer = Queue(MyReducer);

//...pass to Redux

tl;dr

Make sure the async result of your action is always executed directly after the enthusiastic one. Add queued: true to your actions and add parent: action to the async result to have them execute after the first one:

function doSomething() {
    return dispatch => {
        const action = {
            type: MY_ACTION,
            queued: true
        };
        dispatch(action);
        
        setTimeout(() => {
            dispatch({
                type: MY_ACTION_SUCCESS,
                queued: true,
                parent: action
            });
        }, 1000);
    };
}

Example

Managing state while responses will arrive asynchronously back to you is hard. Imagine the following scenario:

Dispatch action 1, user continues and action 2 is dispatched, meanwhile you're syncing state with the server so you get the response from action 1 back, lets call this a. So now the order of dispatched actions on your reducer is as follows:

1 -> 2 -> a

Ok, so if I apply my server state a on top of 2 this might result in weird unexpected glitches in the resulting state, god forbid the initial request fails and we're left with an out-of-sync state. What we want is:

1 -> a -> 2

But without having to block user interaction while we're syncing state with, for example, a server. This is where the Redux-Queue comes into play.

It will save all applied actions and prior states so it will always be able to "inject" the server response in between two other actions as well as reverting local changes when a prior request fails.

Usage

Set-up by wrapping your regular reducers with the Queue:

import {combineReducers} from 'redux'
import Queue from 'redux-queue';

let reducers = combineReducers({
    entries: Queue(entries)
});

Dispatch actions which announce they are queued (including Redux Thunk):

function doSomething() {
    return dispatch => {
        const action = {
            type: MY_ACTION,
            queued: true
        };
        dispatch(action);
        
        setTimeout(() => {
            dispatch({
                type: MY_ACTION_SUCCESS,
                queued: true,
                parent: action
            });
        }, 1000);
    };
}

No matter what happens in between MY_ACTION and MY_ACTION_SUCCESS these will always be executed in order on the entries reducer.

So what to do on failure? Here you go:

function doSomething() {
    return dispatch => {
        const action = {
            type: MY_ACTION,
            queued: true
        };
        dispatch(action);
        
        setTimeout(() => {
            dispatch({
                type: MY_ACTION_FAILED,
                queued: true,
                failed: true,
                parent: action
            });
        }, 1000);
    };
}

Now the state of entries will revert back to the state just before MY_ACTION