Redux middleware resolves action which is a generator function
npm install redux-generator
A middleware for redux, allows to dispatch an action which is a generator function.
``bash`
npm install redux-generator --save
First, apply middleware:
`javascript`
import {applyMiddleware, createStore} from 'redux';
// import redux-generator
import generator from 'redux-generator';
// reducers in your project.
import reducers from './path/to/your/reducers';
// apply redux-generator
const createStoreWithMiddleware = applyMiddleware(generator)(createStore);
const store = createStoreWithMiddleware(reducers);
You can write an action creator like this:
`javascript
// in ./actions/userActionsCreator.js
export const doSaveUser = (user) => {
return function *(dispatch, getState) {
// async dispatch an action
dispatch({type: 'LOADING', payload: 'Loading...'});
// sync waterfall: a plain object yield
let params = yield Object.assign({}, user, {lastModified: new Date().getTime()});
// async dispatch an action
dispatch({type: 'WILL_SAVE_USER', payload: params});
// sync waterfall: a promise yield
let payload = yield new Promise(resolve=> {
process.nextTick(()=> {
params.id = '1';
resolve(params);
});
});
// async dispatch an action
dispatch({type: 'DID_SAVE_USER', payload});
// sync waterfall: a thunk yield
let redirect = yield ()=> {
if (payload && payload.id) {
return {type: 'ROUTING_POP', payload: /user/${payload.id}};
}
};
// Only this ending action will be dispatched by generator middleware after all
return redirect;
};
}
`
Dispatch in anywhere:
`javascript``
import {doSaveUser} from './actions/userActionsCreator';
store.dispatch(doSaveUser({name: 'xyx'}));
These series of actions as follow will be dispatched one by one:
`
dispatch action: { type: 'LOADING', payload: 'Loading' }
dispatch action: { type: 'WILL_SAVE_USER', payload: { lastModified: 1476005411707, name: 'xyx' } }
dispatch action: { type: 'DID_SAVE_USER', payload: { lastModified: 1476005411707, name: 'xyx', id: '1' } }
dispatch action: { type: 'ROUTING_POP', payload: '/user/1' }
Each action was returned by syntax followed yield will be executed step by step. If one of yield throws error, the others behind will be terminated.
Both errors, whether thunk yield threw or promise yield rejected will be translated to FSA standard error action and dispatched:`javascript
import {applyMiddleware, combineReducers, createStore} from 'redux';
import generator from 'redux-generator';
const user = (state = {}, action)=> {
console.log('action>>>reducer:\t', action);
return state;
}
const reducers = combineReducers({user});
const store = applyMiddleware(generator)(createStore)(reducers);
// action>>>reducer: { type: 'ERROR', error: true, payload: [Error: foo] }
store.dispatch(function *action() {
let payload = yield () => {
throw new Error('foo');
}
// never be executed
let redirect = yield {type: 'ROUTING_POP', payload};
return redirect;
});
// action>>>reducer: { type: 'ERROR', error: true, payload: [Error: bar] }
store.dispatch(function *action() {
let payload = yield new Promise((resolve, reject)=> {
process.nextTick(()=>reject(new Error('bar')));
});
// never be executed
let redirect = yield {type: 'ROUTING_POP', payload};
return redirect;
});
// action>>>reducer: { type: 'ERROR', error: true, payload: [Error: Inner error] }
store.dispatch(function *action() {
throw new Error('Inner error');
// never be executed
let params = yield ()=> {
return {name: 'xyx'};
}
// never be executed
let payload = yield new Promise((resolve)=> {
process.nextTick(()=>resolve(Object.assign(params, {id: 1})));
});
return {type: "SAVE", payload};
});
`
npm test
$3
npm run release