Redux-Queue

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

(★ 37)

Higher order reducer to handle execution order of actions

Redux-Queue Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Redux-Queue
====

[![Build Status](https://travis-ci.org/JBlaak/Redux-Queue.svg?branch=master)](https://travis-ci.org/JBlaak/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:

```javascript
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:

```javascript
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:

```javascript
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](https://github.com/gaearon/redux-thunk)):

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:

```javascript
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`

Redux-Queue

Redux-Queue Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Redux-Queue

Redux-Queue Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README