关于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 相关文章推荐
js 动态选中下拉框
Nov 26 Javascript
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
Vue实现表格批量审核功能实例代码
May 28 Javascript
JS如何定义用字符串拼接的变量
Jul 11 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
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
PHP实现文件安全下载
2006/10/09 PHP
Content-type 的说明
2006/10/09 PHP
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
smarty模板引擎之分配数据类型
2015/03/30 PHP
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
深入理解javascript中的this
2021/02/08 Javascript
python赋值操作方法分享
2013/03/23 Python
Python基于Tkinter实现的记事本实例
2015/06/17 Python
Python 支付整合开发包的实现
2019/01/23 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
波兰购物网站:MALL.PL
2019/05/01 全球购物
美国Max仓库:Max Warehouse
2020/05/31 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
应聘医学检验人员自荐信
2013/09/27 职场文书
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
网络技术专业求职信
2014/02/18 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
大学生个人总结范文
2015/02/15 职场文书