关于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 相关文章推荐
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
Javascript高级技巧分享
Feb 25 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
JavaScript中闭包的详解
Apr 01 Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 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实现aes加密类分享
2014/02/16 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
js 蒙版进度条(结合图片)
2010/03/10 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
js实现tab切换效果
2017/02/16 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
Django 路由控制的实现代码
2018/11/08 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
劳动工资科岗位职责范本
2014/03/02 职场文书
个人租房协议书样本
2014/10/01 职场文书
好媳妇事迹材料
2014/12/24 职场文书
总账会计岗位职责
2015/04/02 职场文书
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL
Nginx限流和黑名单配置
2022/05/20 Servers