Redux-sage中间件

Redux-sage中间件功能同Redux-thunk类似，用来管理异步请求和比较复杂的逻辑。

使用步骤

1. 安装 npm install redux-saga or yarn add redux-saga
2. 创建store的时候，配置redux-saga

import { createStore, applyMiddleware  } from "redux";
import createSagaMiddleware from "redux-saga";

import reducer from "./reducer";
import TodoSagas from './sagas';

// 1. create the saga middleware
const sagaMiddleware = createSagaMiddleware()
// 2. mount it on the Store
const store = createStore(
    reducer,
    applyMiddleware(sagaMiddleware)
)

// 3. then run the saga
sagaMiddleware.run(TodoSagas);

export default store;

3. 创建store的时候，还要把创建的sagas.js引入。sagas.js内容如下

import { takeEvery,put } from 'redux-saga/effects';
import {GET_INIT_LIST} from './actionTypes';
import {initListAction} from './actionCreators';
import axios from 'axios';

// 这个方法也是一个generator 函数，它会先取数据，取到数据后，根据数据再创建一个action,派发给store,store再给reducer
function* getInitList(){
    // 等待ajax请求完成，并把结果赋值给res
    const res = yield axios.get('/list.json');
    // 拿到数据后，创建一个action
    const action  = initListAction(res.data);
    // 通过put方法，把action派发给store,store再给reducer
    yield put(action);
}

// 此时 mySaga 是一个generator 函数，sagas.js导出的就是一个generator 函数
// mySaga函数也可以接收action
function* mySaga() {
    // 一旦捕获GET_INIT_LIST这个类型的action的时候,就调用getInitList这个方法
    yield takeEvery(GET_INIT_LIST, getInitList);
}
  
export default mySaga;