博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于 redux-saga 中 take 使用方法详解
阅读量:5874 次
发布时间:2019-06-19

本文共 1871 字,大约阅读时间需要 6 分钟。

本文介绍了关于redux-saga中take使用方法详解,分享给大家,具体如下:

带来一个自己研究好久的API使用方法.

redux-saga中effect中take这个API使用方式,用的多的是call,put,select,但take这个平常还真没什么机会用上,也不清楚在哪里使用才好,不管怎么样,既然是redux-saga写出来的,肯定是有他的用法的,不管37 21,先学会使用方法再说.

先看看介绍:

take

take的表现同takeEvery一样,都是监听某个action,但与takeEvery不同的是,他不是每次action触发的时候都相应,而只是在执行顺序执行到take语句时才会相应action。

当在genetator中使用take语句等待action时,generator被阻塞,等待action被分发,然后继续往下执行。

takeEvery只是监听每个action,然后执行处理函数。对于何时相应action和 如何相应action,takeEvery并没有控制权。

而take则不一样,我们可以在generator函数中决定何时相应一个action,以及一个action被触发后做什么操作。

最大区别:take只有在执行流达到时才会响应对应的action,而takeEvery则一经注册,都会响应action。

上代码:

effects: { * takeDemo1({payload}, {put, call, take}) {  }, * takeInputChange({payload}, {put, call, take,takeEvery,takeLatest}) {  // yield call(delay,1000);  console.log(takeEvery);  // for (let i = 0; i < 3; i++) {   const action = yield take('takeBlur'});   console.log(action, 'action');   console.log(payload.value);  // }  }, * takeBlur() {  console.log(323) },}

********************************************************************************************************************************************************

changeHandle(e){ this.props.dispatch({type:'takeInputChange',payload:{value:e.target.value}})}blur(){ this.props.dispatch({type:'takeBlur'})}render() {  return (  
)}

页面上有一个input,绑定了两个方法,第一个是onchange方法,一个是onBlur方法,

当input值改变 的时候,通过 this.props.dispatch({type:'takeInputChange'}),调用此函数,但是因为遇到了take的方法,不能往下继续执行了(暂停了),如果这里的take换成了takeEvery则大有不同,函数会继续执行,就是下面的两个console会执行,

而takeEvery执行的方法则放在它的回调里了,看下面代码

yield takeEvery('takeBlur',()=>{console.log(payload.value)});

需要强调的是每次input改变的时候都会触发这个函数,所以每次改变的时候,会看到控制台都会打印一次console里的值.

接下来,如果input失去焦点后,则会执行onBlur方法,此时调用this.props.dispatch({type:'takeBlur'});

在takeInputChange里的take因为监听到了takeBlur这个action,那么就会继续执行需要执行的内容.

这个take反正是研究了还算长的时间,不知道这个东西在哪些时候能够派的上用场。

转载于:https://www.cnblogs.com/crazycode2/p/9164501.html

你可能感兴趣的文章
phantomjs-使用系统命令system
查看>>
极客DIY:打造属于自己的无线移动渗透测试箱
查看>>
上海10个项目入选工信部2017年智能制造专项拟支持项目名单
查看>>
ArcEngine中COM对象与其基础RCW分开后就不能再使用
查看>>
nginx default跳转
查看>>
用opencv摄像头视频的获取
查看>>
nginx(tengine)第三方模块 :ngx_cache_purge
查看>>
angularjs1
查看>>
cisco 多生成树MST笔记
查看>>
20180304数据修正记录
查看>>
剑指Offer之数值的整数次方(题11)
查看>>
【转】对js中startWith和endWith的扩展
查看>>
CentOS 6.9配置httpd-2.2.x虚拟主机的三种方式
查看>>
写一本IT类的技术书籍,需要做哪些准备
查看>>
带个机器人带回家 体验Scooba地板清洁工
查看>>
2G,3G,4G,5G的不同之处
查看>>
Java-第十四章-代参的方法(二)-编程实现,输入班里10名学生的身高,获得身高最高的学生要求对象数组类型方法...
查看>>
js获取当月最后一天
查看>>
lpk.dll是什么
查看>>
Office 365 系列之二:注册全球版微软 Office 365
查看>>