Redux 异步解决方案2. Redux-Saga中间件

reducer的type 不能和generator的名字一样。否则会出现惊喜     
call generator 只能接受到返回值      

import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import createSagaMiddleware from 'redux-saga';  // 导入创建saga的函数
import {add, deleter} from './Reducers/TodoList';
import {watch} from './Saga/saga';

// 返回一个saga中间件
const sagaMiddleware = createSagaMiddleware();

export default createStore(
    combineReducers({add, deleter}),
    applyMiddleware(sagaMiddleware)
);

// saga进行监听 传入的必须是一个generator
sagaMiddleware.run(watch);

import {
    call,  // 调用一个函数
    put,
    take,
    select, // 查询store的状态
    takeEvery // 对action进行监听
} from 'redux-saga/effects';


export function* fetchData() {
// 利用generator + yield 同步进行数据处理
    const data = yield fetch("http://jsonplaceholder.typicode.com/posts")
    const res = yield data.json();
    
    // put这个函数相当于正常的dispatch分发一个action给reducer
    yield put({
        type: 'getList',
        payload: res
    })
}


// 对dispatch过来的action 进行监听 如果监听到的action type等 takeEvery的第一个参数则触发 fetchData这个函数
export function* watch() {
    yield takeEvery('fetchData', fetchData);
}

sagaClick = () => {
    this.props.dispatch({
        type: 'fetchData'
    });
};

首先 dispatch -> action 如果type是saga监听的那个type 则运行流程为: dispatch -> action -> watch -> fetchData -> reducer -> store

如果没有和saga的type对应上 会自己分发到reducer，和以前流程保持不变