Rxjs: 6 операторов, которые вы должны знать

Posted on by

Перевод поста RxJS — Six Operators That you Must Know.

1. Concat

const getPostOne$ = Rx.Observable.timer(3000).mapTo({id: 1});
const getPostTwo$ = Rx.Observable.timer(1000).mapTo({id: 2});
Rx.Observable.concat(getPostOne$, getPostTwo$).subscribe(res => console.log(res));
view raw Rx.Observable.concat.js hosted with ❤ by GitHub

удобно, когда важен порядок вывода последовательностей.

2. forkJoin

– аналог Promise.all()

const getPostOne$ = Rx.Observable.timer(1000).mapTo({id: 1});
const getPostTwo$ = Rx.Observable.timer(2000).mapTo({id: 2});
Rx.Observable.forkJoin(getPostOne$, getPostTwo$).subscribe(res => console.log(res))
view raw forkJoinю.js hosted with ❤ by GitHub

3. mergeMap

const post$ = Rx.Observable.of({id: 1});
const getPostInfo$ = Rx.Observable.timer(3000).mapTo({title: "Post title"});
const posts$ = post$.mergeMap(post => getPostInfo$).subscribe(res => console.log(res));
view raw mergeMap.js hosted with ❤ by GitHub

– применяется, когда у вас есть Observable, элементы последовательности которого тоже Observable, а вам хочется объединить все в один поток (чтобы все элементы внутренние Observable порождали событие основного). Не путать со switchMap!

 

4. pairwise

– возвращает не только текущее значение, но в месте с ним и предыдущее значение последовательности

// Tracking the scroll delta
Rx.Observable
.fromEvent(document, 'scroll')
.map(e => window.pageYOffset)
.pairwise()
.subscribe(pair => console.log(pair)); // pair[1] - pair[0]
view raw pairwise.rx.js hosted with ❤ by GitHub

5. switchMap

const clicks$ = Rx.Observable.fromEvent(document, 'click');
const innerObservable$ = Rx.Observable.interval(1000);
clicks$.switchMap(event => innerObservable$)
.subscribe(val => console.log(val));
view raw switchMap.rx.js hosted with ❤ by GitHub

switchMap делает complete для предыдущего Observable, то есть в данном случае у нас всегда будет только один активный Observable для интервала:

а вот mergeMap нам бы на каждый клик порождал новую interval последовательность.

6. combineLatest

– получить последние значения из каждой последовательности при эммите одного из них:

const intervalOne$ = Rx.Observable.interval(1000);
const intervalTwo$ = Rx.Observable.interval(2000);
Rx.Observable.combineLatest(
intervalOne$,
intervalTwo$
).subscribe(all => console.log(all));
view raw combineLatest.rx.js hosted with ❤ by GitHub