关于redux-saga中take使用方法详解


Posted in Javascript onFebruary 27, 2018

本文介绍了关于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 (
  <div style={{position: 'relative'}}>
   <Input onChange={this.changeHandle.bind(this)} onBlur={this.blur.bind(this)}/> 
  </div>
  )
}

页面上有一个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反正是研究了还算长的时间,不知道这个东西在哪些时候能够派的上用场

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 对象的解释
Nov 24 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 Javascript
JS实现文字掉落效果的方法
May 06 Javascript
js实现基于正则表达式的轻量提示插件
Aug 29 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
jQuery中的100个技巧汇总
Dec 15 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 #Javascript
angularJs 表格添加删除修改查询方法
Feb 27 #Javascript
ExtJs整合Echarts的示例代码
Feb 27 #Javascript
angularJS实现动态添加,删除div方法
Feb 27 #Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 #Javascript
AngularJS动态添加数据并删除的实例
Feb 27 #Javascript
JS严格模式知识点总结
Feb 27 #Javascript
You might like
php数组应用之比较两个时间的相减排序
2008/08/18 PHP
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
Pyhton中防止SQL注入的方法
2015/02/05 Python
Python实现自动发送邮件功能
2021/03/02 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
python 制作网站小说下载器
2021/02/20 Python
TripAdvisor瑞典:全球领先的旅游网站
2017/12/11 全球购物
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
JAVA和C++的区别
2013/10/06 面试题
指针和引用有什么区别
2013/01/13 面试题
寄语是什么意思
2014/04/10 职场文书
创建青年文明号材料
2014/05/09 职场文书
科技之星事迹材料
2014/06/02 职场文书
社区戒毒工作方案
2014/06/04 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
委托函范文
2015/01/29 职场文书
导游词怎么写
2015/02/04 职场文书
幼师中班个人总结
2015/02/12 职场文书
2015年端午节活动方案
2015/05/05 职场文书