жовтень 10, 2017 · angular angular-cli

RxJS 5 Lettable Operators та Angular CLI 1.4.9+

У @angular/[email protected] додали підтримку [email protected] і ви можете спробувати новий механізм для управління потоками.

Раніше ми писали так:

import 'rxjs/add/operator/takeUntil';
import 'rxjs/add/operator/pluck';
import 'rxjs/add/operator/filter';

stream
  .takeUntil(...)
  .pluck(...)
  .filter(...)
  .subscribe();

А тепер можемо так:

import { takeUntil, pluck, filter } from 'rxjs/operators';

stream
  .pipe(
      takeUntil(...),
      pluck(...),
      filter(...),
  )
  .subscribe();

Для того, щоб спробувати нові можливості, потрібно оновити Angular CLI та RxJS.

Навіщо?

Імпорт кожного оператора в кожному файлі був необхідний, щоб не додавати rxjs-лібу цілком у бандл. Основна проблема з ланцюжками викликів, в неможливості використовувати tree-shaking для відсіювання невикористаного коду.

Якщо ви імпортували якийсь оператор і потім перестали його використовувати, то це неможливо автоматично відстежити лінтером або іншими інструментами.

Також спростився механізм створення кастомних операторів.

Використання

Тепер оператори це просто функції з інтерфейсом <T, R>(source: Observable<T>) => Observable<R>.

А до Observable доданий метод pipe, який по-черзі застосовує оператори.

Приклад з офіційної доки:

import { range } from 'rxjs/observable/range';
import { map, filter, scan } from 'rxjs/operators';

const source$ = range(0, 10);

source$.pipe(
 filter(x => x % 2 === 0),
 map(x => x + x),
 scan((acc, x) => acc + x, 0)
)
.subscribe(x => console.log(x))

Створюємо свій оператор

Можливість написати кастомний оператор була і раніше, але це вимагало певних зусиль.

На прикладі з офіційної доки, можна побачити всю лаконічність нового API.

import { interval } from 'rxjs/observable/interval';
import { map, take, toArray } from 'rxjs/operators';

/**
* an operator that takes every Nth value
*/
const takeEveryNth = (n: number) => <T>(source: Observable<T>) =>
 new Observable(observer => {
   let count = 0;
   return source.subscribe({
     next(x) {
       if (count++ % n === 0) observer.next(x);
     },
     error(err) { observer.error(err); },
     complete() { observer.complete(); }
   })
 });


interval(1000).pipe(
 takeEveryNth(2),
 map(x => x + x),
 takeEveryNth(3),
 take(3),
 toArray()
)
.subscribe(x => console.log(x));
// [0, 12, 24]

Оголошення оператору не створює сайд-ефектів, це просто функція, яку ми використовуємо всередині методу pipe.


Більше інформації в офіційній доці: https://github.com/ReactiveX/rxjs/blob/master/doc/lettable-operators.md

  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket