关于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 条评论
登录 后参与评论

相关文章

来自专栏王亚昌的专栏

结构体或类定义中对变长成员的处理

此外,sizeof(stHeadInfo)的结果是不包括char cgiinfo[0]的,因为元素是0个,所以不占空间。

591
来自专栏微信公众号:Java团长

面试的角度诠释Java工程师(一)

我相信每一个程序员都是为了生活而努力着的。很多人因为兴趣,从此踏上了这条‘烧脑大行动’的金桥;也有很多人因为梦想和执着,奋不顾身融入这个职业;还有很多人因为被现...

531
来自专栏开发 & 算法杂谈

Hiredis源码阅读(一)

Hiredis库主要包含三类API:同步api、异步api以及回复解析api。首先介绍一下同步api以及回复解析api。

31011
来自专栏大内老A

yield在WCF中的错误使用——99%的开发人员都有可能犯的错误[上篇]

在定义API的时候,对于一些返回集合对象的方法,很多人喜欢将返回类型定义成IEnumerable<T>,这本没有什么问题。这里要说的是另一个问题:对于返回类型为...

1758
来自专栏我是攻城师

Spark任务两个小问题笔记

2947
来自专栏张善友的专栏

Redis应用场景

Redis开创了一种新的数据存储思路,使用Redis,我们不用在面对功能单调的数据库时,把精力放在如何把大象放进冰箱这样的问题上,而是利用Redis灵活多变的数...

2036
来自专栏

c++ 之bind使用

网络编程中, 经常要使用到回调函数。 当底层的网络框架有数据过来时,往往通过回调函数来通知业务层。 这样可以使网络层只专注于 数据的收发, 而不必关心业务 在c...

3043
来自专栏对角另一面

lodash源码分析之缓存方式的选择

本文为读 lodash 源码的第八篇,后续文章会更新到这个仓库中,欢迎 star:pocket-lodash

1899
来自专栏前端学习心得

JavaScript运行机制

1022
来自专栏aCloudDeveloper

UNIX环境高级编程笔记之标准I/O库

一、总结   文件I/O一章讲了不带缓冲的I/O,本章讲的是带缓冲的I/O。不带缓冲针对的是内核的系统调用,而带缓冲针对的是用户空间的标准库函数,是基于带缓冲的...

1679

扫码关注云+社区