redux中间件之redux-saga学习记录

中间件指的是action和store之间。是redux的中间件。
redux-thunk是将异步代码放到action之中，便于自动化测试和代码的拆分管理。
redux-saga也是异步代码拆分的中间件。
redux-sage将异步的逻辑放到单独的文件里。例如sagas.js，sagas文件也可以接收action

1、redux-saga的创建

yarn add redux-saga或者npm install redux-saga --save
a.从redux-saga中引入createSagaMiddleware生成中间件的 方法，
import createSagaMiddleware from 'redux-saga'
b.生成一个中间件
const sagaMiddleware = createSagaMiddleware()
c.将生成的中间件传入applyMiddleware()方法（与redux-thunk的使用进行对比，加深记忆）

2、redux-saga的使用

a.创建一个sagas.js文件，用于单独存放异步逻辑。
b.在store.js中引入saga.js，并调用sagaMiddleware.run(mySagas)方法传入引入的sagas文件。
c.重启项目

3、sagas.js捕捉action进行异步处理

sagas.js:可以接收组件的action，必须返回一个function* name(){}
a.从redux-saga/effects中引入{ takeEvery }方法，传入一个action类型和对应要执行的异步操作方法。
takeEvery 方法捕捉action执行异步函数。
b.从redux-saga/effects中引入{ put }方法,put方法进行获取到异步数据后的action派送,派送给reducer再由reducer继续执行 reducer→store→component的工作流程。

ajax成功与失败的处理（利用try catch）

redux-saga工作流程

捕捉数据请求的action→进行异步数据获取→put一个action给store→reducer→store数据更新→component