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