redux sequnence action middleware

Downloads in past


0.2.17 years ago8 years agoMinified + gzip package size for redux-sequence-action in KB


Redux Sequence Action
A middleware enabling sequential action dispatch for Redux.
Build Status npm version
$ npm install --save redux-sequence-action


Suppose you have a AddressPicker component which let user select the delivery address. It consists of 2 select with state list and city list. User can picks a state then a city.
So you will have the following action creators:
- selectState (stateId) - selectCity (cityId)
However, when user changes a state, the city list should be updated accordding to new state. For action creator selectState, it actually does the duty of selectState and selectCity.
For example, suppose we must dispatch some actions in certain order: A => B & C => D => E. A is a sync action and others are async actions. So we do this:
````javascript dispatch((dispatch, getState) => {
Promise.all(dispatch(B), dispatch(C)).then(() => {
    return dispatch(D);
}).then(() => {
}) // A => B & C => D => E // A ~ E are actions
It need apply a thunk middleware which dispatch function like action, and a fetch middleware which is responsible for getting API data and return a promise.

store => next => action => {
  //return a promise here
  return asyncAction(url, params).then(
    data => {
      return next({...action, payload: data, type: successType})
    }, e => {}

If you use redux-sequnce-action, you can merely write declarative code like this:
    [B, C],

Yes, we only provide a syntax sugar.


To better reuse our code, we can dispatch a action that dispatchs more action in sequence, looks like this:
function selectState(stateId) {
  return [
      type: 'SELECT_STATE',
      payload: stateId
    (dispatch, getState) => {
      // `getState()` returns the state (or store) which is computed through
      // first action, so you can use this updated store to find out needed
      // portion and pass it to next action creator
      const {cityId} = getState().cityList[0];

function selectCity(cityId) {
  return {
    type: 'SELECT_CITY',
    payload: cityId

When we call selectState(13), this action creator will first dispatch a SELECT_STATE action with payload 13. Our reducer should update and return the new state (or store).
Then it will dispatch another action defined as the second element in steps array. Inside this function, we can get updated store and find out wanted part of the store and pass it to next action.


$ npm install --save redux-sequence-action

Then, to enable Redux Sequence Action, use applyMiddleware():
import { createStore, applyMiddleware } from 'redux';
import sequenceAction from 'redux-sequence-action';
import rootReducer from './reducers/index';

// create a store that has redux-sequence-action middleware enabled
const createStoreWithMiddleware = applyMiddleware(

const store = createStoreWithMiddleware(rootReducer);

As your action creator, it should return an array of actions.


$ npm run test