troygoode/Redux-Queue

Library to handle queued requests with ease in your Redux application

Redux-Queue

Higher order reducer to easily cope with async actions.

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 w'ere 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 => {
        let 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 => {
        let 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