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:
// 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. ```javascript { //return a promise here return } ``` If you use redux-sequnce-action, you can merely write declarative code like this: ```javascript``` 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: ```javascript { return type: 'SELECT_STATE' payload: stateId { // `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 = cityList0; } } { return type: 'SELECT_CITY' payload: cityId ;}``` When we call ``, 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(): ```;;; // create a store that has redux-sequence-action middleware enabledconst createStoreWithMiddleware = createStore; const store = ;``` As your action creator, it should return an array of actions. ## Scripts ```$ npm run test``` ## License MIT