关于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实现自定义标签
May 08 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
May 27 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 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获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
Python中bisect的使用方法
2019/12/31 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
全球性的在线商店:Vogca
2019/05/10 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
信息专业学生学习的自我评价
2014/02/17 职场文书
运动会通讯稿500字
2014/02/20 职场文书
财务主管岗位职责
2014/02/28 职场文书
学习雷锋精神心得体会范文
2014/03/12 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
导游词400字
2015/02/13 职场文书
涨价通知怎么写
2015/04/23 职场文书
2015年公司工作总结
2015/04/25 职场文书
高中升旗仪式主持词
2015/07/03 职场文书