Документация RxJS

RxJS — это библиотека для создания асинхронных и основанных на событиях программ с использованием последовательностей observable. Она предоставляет один основной тип, Observable, спутниковые типы (Observer, Schedulers, Subjects) и операторы, вдохновленные Array методами (map, filter, reduce, every, и т. д.) для обработки асинхронных событий как коллекций.

Подумайте о RxJS как о Lodash для событий.

ReactiveX объединяет паттерн наблюдателя с паттерном итератора и функциональное программирование с коллекциями, чтобы удовлетворить потребность в идеальном способе управления последовательностями событий.

Основные концепции RxJS, которые решают проблему управления асинхронными событиями:

• Observable: представляет собой понятие вызываемой коллекции будущих значений или событий.
• Observer: это коллекция обратных вызовов, которая знает, как прослушивать значения, предоставляемые Observable.
• Subscription: представляет выполнение Observable, в первую очередь полезно для отмены выполнения.
• Operators: — это чистые функции, которые позволяют применять функциональный стиль программирования к коллекциям с операциями, такими как map, filter, concat, reduce, и т. д.
• Subject: эквивалентен EventEmitter и является единственным способом многоканальной передачи значения или события нескольким Observer.
• Schedulers: это централизованные диспетчеры для управления параллельностью, позволяющие координировать выполнение вычислений, например, на setTimeout или requestAnimationFrame или других.

Первые примеры

Обычно вы регистрируете обработчики событий.

document.addEventListener('click', () => console.log('Clicked!'));

Используя RxJS, вы создаете observable вместо этого.

import { fromEvent } from 'rxjs';

fromEvent(document, 'click').subscribe(() => console.log('Clicked!'));

Чистота

Мощность RxJS заключается в его способности генерировать значения с использованием чистых функций. Это означает, что ваш код менее подвержен ошибкам.

Обычно вы создаете нечистую функцию, где другие части вашего кода могут испортить состояние.

let count = 0;
document.addEventListener('click', () => console.log(`Clicked ${++count} times`));

Используя RxJS, вы изолируете состояние.

import { fromEvent, scan } from 'rxjs';

fromEvent(document, 'click')
  .pipe(scan((count) => count + 1, 0))
  .subscribe((count) => console.log(`Clicked ${count} times`));

Оператор scan работает так же, как reduce для массивов. Он принимает значение, которое передается в обратный вызов. Возвращаемое значение обратного вызова затем станет следующим значением, которое передается в следующий раз при выполнении обратного вызова.

Поток

RxJS имеет целый ряд операторов, которые помогают вам контролировать, как события проходят через ваши observable.

Вот как вы бы разрешили не более одного щелчка в секунду с помощью обычного JavaScript:

let count = 0;
let rate = 1000;
let lastClick = Date.now() - rate;
document.addEventListener('click', () => {
  if (Date.now() - lastClick >= rate) {
    console.log(`Clicked ${++count} times`);
    lastClick = Date.now();
  }
});

С помощью RxJS:

import { fromEvent, throttleTime, scan } from 'rxjs';

fromEvent(document, 'click')
  .pipe(
    throttleTime(1000),
    scan((count) => count + 1, 0)
  )
  .subscribe((count) => console.log(`Clicked ${count} times`));

Другие операторы управления потоком — filter, delay, debounceTime, take, takeUntil, distinct, distinctUntilChanged и т. д.

Значения

Вы можете преобразовывать значения, передаваемые через ваши observable.

Вот как вы можете добавить текущую позицию x мыши для каждого щелчка с помощью обычного JavaScript:

let count = 0;
const rate = 1000;
let lastClick = Date.now() - rate;
document.addEventListener('click', (event) => {
  if (Date.now() - lastClick >= rate) {
    count += event.clientX;
    console.log(count);
    lastClick = Date.now();
  }
});

С помощью RxJS:

import { fromEvent, throttleTime, map, scan } from 'rxjs';

fromEvent(document, 'click')
  .pipe(
    throttleTime(1000),
    map((event) => event.clientX),
    scan((count, clientX) => count + clientX, 0)
  )
  .subscribe((count) => console.log(count));

Другие операторы, генерирующие значения, — pluck, pairwise, sample и т. д.