中间件指的是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