介绍
本篇文章为大家展示了如何正确的使用redux-saga,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
redux-saga是一个管理回来的应用异步操作的中间件,功能类似redux-thunk +异步/等待,它通过创建传奇将所有的异步操作逻辑存放在一个地方进行集中处理。
<强> redux-saga的影响
redux-saga中的影响是一个纯文本JavaScript对象,包含一些将被传奇中间件执行的指令。这些指令所执行的操作包括如下三种:
<李> 发起一个异步调用(如发一起一个Ajax请求)
<李> 发起其他的行动从而更新商店
<李> 调用其他的传奇
影响中包含的指令有很多,具体可以异步API参考进行查阅
<强> redux-saga的特点
方便测试,例如:
assert.deepEqual (iterator.next () value,,叫(Api.fetch, & # 39;/产品# 39;)) <李> 操作可以保持其纯净性,异步操作集中在传奇中进行处理
<李> 看/工人(监听→执行)的工作形式
<李> 被实现为发电机
<李> 对含有复杂异步逻辑的应用场景支持良好
<李> 更细粒度地实现异步逻辑,从而使流程更加清晰明了,遇到错误易于追踪和解决。
<李> 以同步的方式书写异步逻辑,更符合人的思维逻辑
<李> 从redux-thunk到redux-saga
假如现在有一个场景:用户在登录的时候需要验证用户的用户名和密码是否符合要求。
<强>使用redux-thunk实现
获取用户数据的逻辑(user.js):
//, user.js
import request 得到& # 39;axios& # 39;;//define 常量//,define initial 状态//,export default 减速器
export const loadUserData =, (uid),=祝辞,async (调度),=祝辞,{
try {才能
,,,调度({,类型:USERDATA_REQUEST });
,,,let {, data },=, await request.get('/用户/$ {uid} ');
,,,调度({,类型:USERDATA_SUCCESS,, data });
},才能赶上(错误),{
,,,调度({,类型:USERDATA_ERROR,, error });
,,}
} 验证登录的逻辑(login.js):
import request 得到& # 39;axios& # 39;;
{},loadUserData import 得到& # 39;。/用户# 39;;
export const login =,(用户,通过),=祝辞,async (调度),=祝辞,{
try {才能
,,,调度({,类型:LOGIN_REQUEST });
,,,let {, data },=, await request.post(& # 39;/登录# 39;,,{,用户,pass });
,,,await 调度(loadUserData (data.uid));
,,,调度({,类型:LOGIN_SUCCESS,, data });
},才能赶上(错误),{
,,,调度({,类型:LOGIN_ERROR,, error });
,,}
} <>强redux-saga
异步逻辑可以全部写进传奇。js中:
export 函数*,loginSaga (), {
,而(真正的){
const 才能{用户的不同之处是,pass },=,油品收率带(LOGIN_REQUEST),//等待,Store 上指定的,action LOGIN_REQUEST
try {才能
,,let {, data },=,油品收率调用(loginRequest,,{,用户,pass });,//阻塞,请求后台数据
,,油品收率叉(loadUserData, data.uid);,//非阻塞执行loadUserData
,,油品收率put({,类型:LOGIN_SUCCESS,, data });,//发起一个行动,类似于调度
},才能赶上(错误),{
,,油品收率put({,类型:LOGIN_ERROR,, error });
,,},
,}
}
export 函数*,loadUserData (uid), {
,try {
油品收率才能把({,类型:USERDATA_REQUEST });
{let 才能;data },=,油品收率调用(userRequest,,/用户/$ {uid});
油品收率才能把({,类型:USERDATA_SUCCESS,, data });
}大敌;抓(错误),{
油品收率才能把({,类型:USERDATA_ERROR,, error });
,}
} <>强难点解读
对于redux-saga,还是有很多比较难以理解和晦涩的地方,下面笔者针对自己觉得比较容易混淆的概念进行整理:
<强>采取的使用
花和takeEvery都是监听某个行动,但是两者的作用却不一致,takeEvery是每次行动触发的时候都响应,而花则是执行流执行到把语句时才响应.takeEvery只是监听行动,并执行相对应的处理函数,对何时执行行动以及如何响应行动并没有多大的控制权,被调用的任务无法控制何时被调用,并且它们也无法控制何时停止监听,它只能在每次行动被匹配时一遍又一遍地被调用。但是带可以在发电机函数中决定何时响应一个行动以及响应后的后续操作。
