Redux-GeneratorRedux 的中間件

Redux 中間件， 允許你發(fā)起一個(gè)ES6 generator 函數(shù)類型的action。

可以借由generator的特性，在業(yè)務(wù)中處理一些流程控制（狀態(tài)流轉(zhuǎn)），批量處理之類的場景。

用法示例

首先，應(yīng)用中間件

import {applyMiddleware, createStore} from 'redux';
// import redux-generator
import {generator} from 'redux-generator';
// or
// import generator from 'redux-generator/lib/generator'
// reducers in your project.
import reducers from './path/to/your/reducers';
// apply redux-generator
const createStoreWithMiddleware = applyMiddleware(generator)(createStore);
const store = createStoreWithMiddleware(reducers);

編寫 action 創(chuàng)造器

// 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;
    };
}