Redux Sequence Action

A middleware enabling sequential action dispatch for Redux.

$ npm install --save redux-sequence-action

Why

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:

dispatch((dispatch, getState) => {
    dispatch(A);
    Promise.all(dispatch(B), dispatch(C)).then(() => {
        return dispatch(D);
    }).then(() => {
        dispatch(E);
    });
})
// 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:

dispatch([
    A,
    [B, C],
    D,
    E
])

Yes, we only provide a syntax sugar.

How

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];
      dispatch(selectCity(cityId))
    }
  ]
}

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.

Usage

$ 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(
  sequenceAction
)(createStore);

const store = createStoreWithMiddleware(rootReducer);

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

Scripts

$ npm run test

License

MIT

jasonslyvia / redux-sequence-action Goto Github PK