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

猜你喜欢

转载自blog.csdn.net/weixin_39786582/article/details/83579064