[RxJS] Flatten a higher order observable with mergeAll in RxJS

Among RxJS flattening operators, switch is the most commonly used operator. However, it is important to get acquainted with mergeAll, another flattening operator which allows multiple concurrent inner observables. In this lesson we will explore mergeAll in detail.

const clickObservable = Rx.Observable
  .fromEvent(document, ‘click‘);

const clockObservable = clickObservable
  .map(click => Rx.Observable.interval(1000))
  .mergeAll(3); // allow 3 inner observables

// flattening
// Observable<Observable<number>> ---> Observable<number>

/*
--------+--------+------------------------
        \                 -0-1-2-3 -0-1-2-3-4-5-6

         mergeAll

----------0-1-2-3-405162738495...
*/

clockObservable
  .subscribe(x => console.log(x));
时间: 2024-08-02 02:48:19

[RxJS] Flatten a higher order observable with mergeAll in RxJS的相关文章

[RxJS] Flatten a higher order observable with concatAll in RxJS

Besides switch and mergeAll, RxJS also provides concatAll as a flattening operator. In this lesson we will see how concatAll handles concurrent inner Observables and how it is just mergeAll(1). const clickObservable = Rx.Observable .fromEvent(documen

[Redux] Understand Redux Higher Order Reducers

Higher Order Reducers are simple reducer factories, that take a reducer as an argument and return a new reducer. In that new reducer, you can customize the behaviour of the original one which helps reducing the reducer logic. In this lesson, we'll se

[React] Cleanly Map Over A Stateless Functional Component with a Higher Order Component

In this lesson we'll create a Higher Order Component (HOC) that takes care of the key property that React looks for when using map to create elements from a list. This HOC will allow us to wrap any component and it will take care of placing the keypr

Javascript—Higher Order Functions

Higher order functions are functions that manipulate other functions. For example, a function can take other functions as arguments and/or produce a function as its return value. Such fancy functional techniques are powerful constructs available to y

[RxJS] Add debug method to Observable in TypeScript

Observable.prototype.debug = function(message: any) { return this.do( (next) => { if(!environment.production) { console.log(message, next); } }, (err) => { if(!environment.production) { console.error(message, err) } }, () => { if(!environment.pro

rxjs创建异步数据的Observable

interval和timer:定时产生数据 interval的参数是1000,在1秒的时刻吐出0,2s吐出1,3s吐出2,........ 这个数据流不会完结,因为interval不会主动调用下游的complete,要想停止这个数据的序列,必须要做退订的动作. import { Observable } from 'rxjs'; import 'rxjs/add/observable/interval'.... let source$ = Observable.interval(1000); s

rxjs - 创建异步数据的Observable对象

一.interval和timer:用于定时产生数据 interval说明:它接收一个数值类型的参数,表示产生数据的间隔时间,单位为毫秒,返回的Observable对象就按照这个时间间隔来产生递增序列,从0开始,但是有限制. timer说明:第一个参数若为数值则单位为毫秒,表示间隔时间,产生一个数据0立即结束,若为Date类型的对象,则表示到这个时间点执行,第二个参数若传入,则类似于interval,表示产生数据的时间间隔,但是产生0的时间仍然是由第一个参数决定. 二.from:可把一切转成Obs

高阶函数HOF和高阶组件HOC(Higher Order Func/Comp)

一.什么是高阶函数(组件),作用是什么? 子类使用父类的方法可以通过继承的方式实现,那无关联组件通信(redux).父类使用子类方法(反向继承)呢 为了解决类(函数)功能交叉/功能复用等问题,通过传入类/函数返回类/函数(继承)的方式使得类拥有自身未定义的方法. 例如react-redux的connect方法使用了高阶组件: React Redux的connect: const HOC = connnect(mapStateToProps)(Comp); // connect为柯里化函数 实际为

[RxJS] Split an RxJS Observable into groups with groupBy

groupBy() is another RxJS operator to create higher order observables. In this lesson we will learn how groupBy works for routing source values into different groups according to a calculated key. const numbersObservable = Rx.Observable.interval(500)