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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏蛋未明的专栏

微信扫描登录

95130
来自专栏Java后端技术栈

分布式锁简单入门以及三种实现方式介绍

很多小伙伴在学习Java的时候,总是感觉Java多线程在实际的业务中很少使用,以至于不会花太多的时间去学习,技术债不断累积!等到了一定程度的时候对于与Java多...

12310
来自专栏任浩强的运维生涯

nginx关于限制请求数和连接数

nginx轻巧功能强大,能承受几百并发量,ddos攻击几乎没有影响到nginx自身的工作,但是,太多的请求就开始影响后端服务了。所以必须要在nginx做相应的限...

21100
来自专栏杂烩

一种海量日志存储、分析解决方案V1.1 原

针对上一个版本https://my.oschina.net/shyloveliyi/blog/786337,有如下更新:

12030
来自专栏大闲人柴毛毛

Linux文件系统——全方位掌握

文件系统的特性 磁盘分区完毕后需要进行格式化,操作系统才能使用这个分区。 不同操作系统能够使用的文件系统是不同的,例如:Windows98以前使用FAT/F...

40590
来自专栏EAWorld

十六个有用的Linux命令行技巧

作者 likegeeks 译者 张斌 我们每天都会使用Linux命令行,但由于实践不多,我们可能会忘记一些Linux命令行技巧。在本文中,我将向你展示一些你可能...

35640
来自专栏freesan44

iOS 对源代码进行混淆

代码混淆,刚刚看到是不是有点懵逼,反正我是最近才接触到这么个东西,因为之前对于代码和APP,只需要实现功能就好了,根本没有考虑什么安全问题。

26010
来自专栏前端杂货铺

node模块加载层级优化

模块加载痛点 大家也或多或少的了解node模块的加载机制,最为粗浅的表述就是依次从当前目录向上级查询node_modules目录,若发现依赖则加载。但是随着应用...

38680
来自专栏cloudskyme

分布式文件存储的数据库——Mongodb

什么是mongodb MongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。    MongoD...

44260
来自专栏静下来

#1273 – Unknown collation: ‘utf8mb4_unicode_ci’的解决方法

前段时间没心情更新博客,现在打算又慢慢更新吧。 换了个域名,换个心情。 最近由于一个新的网站程序。对mysql、php版本有特殊要求。 又不想浪费钱再去买个服务...

401120

扫码关注云+社区

领取腾讯云代金券