Redux-saga中间件的使用

中间件是action和store的中间，所以指的是redux的中间件，只有redux才有action和store的概念。而不是react的中间件是redux的中间件，不要弄混了。

在之前的redux-thunk里我们把异步的代码都放在了action里面了，如下：

redux-saga也是做异步代码拆分的中间件。
下面是最初始的不用任何中间件的代码：


下面使用redux-saga来实现异步功能：

接着把异步代码都放在一个单独文件里，这里我们取名叫sagas.js，然后在创建store的index.js文件里引入这个文件：

接着运行这个sagas文件。

具体配置方式看GitHub指南。

sagas.js文件的写法要求函数必须是generator函数，然后把这个函数导出。导出之后store的index文件引入的其实就是那个generator函数，然后让saga的中间件去运行那个generator函数。
接着按之前的方式创建action并派发给store：


当我们没有使用redux-saga的时候，action只会给到store，store拿到action和之前的state再一起转发给reducer，所以我们只能在reducer里面去根据action的类型做一些业务逻辑，有了redux-saga之后，在sagas.js文件里也可以接收action了。

takeEvery(‘类型’，方法)函数只要捕捉一个action类型就执行对应的方法。以前的代码只能在reducer里接收action然后执行对应的类型处理。

注意：在generator函数里面做异步请求的时候就不要再使用promise的形式了。用yield来做。

总结：
首先在创建store的时候根据redux-sagas官方文档的配置，把redux-sagas的配置好，引入createSagaMiddleware接着创建一个sagaMiddleware，然后通过applyMiddleware去使用这个中间件。
接着创建一个sagas文件，然后在store的index文件里引入这个文件，再通过sagaMiddleware去运行引入的这个文件。接着把精力投入到写sagas文件中，sagas文件中一定要导出generator函数。

store/index.js文件：

import { createStore, applyMiddleware, compose } from 'redux';
import reducer from './reducer';
// import thunk from 'redux-thunk';
import createSagaMiddleware from 'redux-saga'
import { todoSaga } from './sagas'

const sagaMiddleware = createSagaMiddleware()

const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;

const enhancer = composeEnhancers(
  applyMiddleware(sagaMiddleware)
);

const store = createStore(reducer, enhancer);
sagaMiddleware.run(todoSaga)

export default store;