React解惑之 redux-saga

Redux-saga

概述

redux-saga和redux-thunk一样，是用于处理redux应用异步请求的中间件，reduxsaga通过创建sagas来把所有的异步请求集中处理，方便维护。本篇文章将讲述如何使用redux-saga来处理异步请求，

项目预览地址：需要的小伙伴可以查看页面

工程部署

项目中redux文件夹就是saga的配置文件，由于项目中没有多个state需要管理，所以store里面的数据就是我们需要的数据。

effects.js 

用于定义effects处理方法，和导出saga监听action处理方法，effects中fetchTopics方法详情如下：

注意effects中的方法都是Generator方法，使用同步的写法来调用异步请求，不在使用回调、async/await等方法来处理，代码更简洁

处理步骤：

1、调用redux-saga/effects中的方法 call，访问接口获取数据；

2、接口访问成功，使用redux-saga/effects中的方法put，发起action，这里的put方法和dispatch一样，都是用于发起action；

3、put发起action后，redux的reducers会收到action，从而更新state。

reducers.js 

这里的写法和redux-thunk中reducers写法一样

main.js

main.js 中首先加入redux-saga中间件，用于处理异步请求，这里的sagaMiddleware.run() 方法，主要是启动saga，用于监听actions请求，待匹配到定义的effects type时，转发调用effects方法，从而处理异步请求

调用过程：

从打印数据中可以看出，当dispatch一个action时，首先进入的是reducers方法，由于type为fetchTopics的action，saga已经注册监听，则会调用effects中的fetchTopics方法，待异步请求完毕之后，调用put发起了一个新的topics action，所以还是会进入reducers中进行处理。

总结

redux-saga的使用主要是添加监听，用于处理自定义的异步处理请求，在将结果调用put方法发起action，从而交给reducer方法处理，使得redux异步处理更灵活。

代码链接地址：需要的小伙伴可以下载

如果对你有帮助，劳烦点个赞吧，谢谢！-V-