redux-saga中take如何使用

本文主要和大家介绍了关于redux-sagatake使用方法详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

带来一个自己研究好久的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 


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

以上就是redux-saga中take如何使用的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2785521.html

(0)
上一篇 2025年3月8日 17:27:16
下一篇 2025年3月8日 17:27:20

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • c标签在js中如何正确使用

    关于c标签在js中如何正确使用呢?本文就和大家分享一小段代码,希望能帮助到大家。 ————– 登录后复制 必须放在script标签下才不报错,不能单独写在独立的js文件中,否则报错。 以上就是c标签在js中如何正确使用的详…

    编程技术 2025年3月8日
    200
  • js简单使用Math数学的方法

    本文主要和大家分享js简单使用math数学的方法,希望能帮助到大家。 //Math是全局的//Math.PI 数学里的3.1415926….console.log(Math.PI);//取随机数//js提供的随机函数 Math.rand…

    编程技术 2025年3月8日
    200
  • vue中如何使用cropperjs

    用vue的项目里需要对图片进行裁剪,于是使用了cropperjs,在使用的过程中也踩过一些坑,以下是在.vue文件里cropperjs的使用方法和经验教训总结: 在使用之前,先引入: 在项目里,运行: npm install cropper…

    2025年3月8日 编程技术
    200
  • 使用Pixi.js的总结

    这次给大家带来使用pixi.js的总结,使用pixi.js的注意事项有哪些,下面就是实战案例,一起来看一下。 Pixi.js是一个用JavaScript写的2D渲染引擎,可以用来在浏览器里做交互图形、动画和游戏等的“富视觉”应用,主打支持硬…

    编程技术 2025年3月8日
    200
  • 怎样使用gulp自动优化requireJS的项目

    这次给大家带来怎样使用gulp自动优化requirejs的项目,使用gulp自动优化requirejs的项目的注意事项有哪些,下面就是实战案例,一起来看一下。 {    “name”: “gulp-requireDemo”,    “ver…

    编程技术 2025年3月8日
    200
  • flv.js的使用详解

    这次给大家带来flv.js的使用详解,使用flv.js的注意事项有哪些,下面就是实战案例,一起来看一下。 Bilibili相信大家都不会陌生,而 Flv.js 就是由 bilibili 网站开源的 HTML5 Flash 视频(FLV)播放…

    编程技术 2025年3月8日
    200
  • Rxjs的使用详解

    这次给大家带来rxjs的使用详解,使用rxjs的注意事项有哪些,下面就是实战案例,一起来看一下。 一个可观察对象的执行期间,零个到无穷多个next通知被发送。如果Error或者Complete通知一旦被发送,此后将不再发送任何值。 可观察对…

    编程技术 2025年3月8日
    200
  • js中比较运算符应如何科学使用

    这次给大家带来js中比较运算符应如何科学使用,科学使用js中的比较运算符注意事项有哪些,下面就是实战案例,一起来看一下。 比较运算符 关系运算符最常用的类型是比较运算符,它们用于确定两个值的相对顺序。比较运算符是: 小于()>运算符求…

    编程技术 2025年3月8日
    200
  • JS的函数节流使用

    这次给大家带来js的函数节流使用,js函数节流使用的注意事项有哪些,下面就是实战案例,一起来看一下。 函数节流(throttle) 函数节流就是预定一个函数只有在大于等于执行周期时才执行,周期内调用不执行。好像水滴攒到一定重量才会落下一样。…

    编程技术 2025年3月8日
    200
  • JS的正则表达式如何使用

    这次给大家带来js的正则表达式如何使用,使用js正则表达式的注意事项有哪些,下面就是实战案例,一起来看一下。 学好正则表达式很重要,下面是一些关于正则表达式的基本知识整理  : 转义字符 ^  : 匹配字符串开始位置 $  : 匹配字符串结…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论