Операторы RxJS

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

Основные категории операторов

  1. Создание потоков (Creation Operators)

    • of(...items) — создаёт Observable, испускающий заданные значения по очереди.
    • from(array | promise | iterable) — конвертирует массив, промис или любой итерируемый объект в поток.
    • interval(period) — создаёт поток чисел через заданный интервал времени.

  2. Преобразование (Transformation Operators)

    • map(fn) — трансформирует каждый элемент потока.
    • mapTo(value) — заменяет каждый элемент фиксированным значением.
    • scan(accumulator, seed) — аккумулирует значения, аналогично reduce в массивах, но для потоков.

  3. Фильтрация (Filtering Operators)

    • filter(predicate) — пропускает только элементы, удовлетворяющие условию.
    • take(count) — ограничивает поток первым count элементами.
    • first() / last() — берёт первый или последний элемент потока.

  4. Комбинирование (Combination Operators)

    • merge(...observables) — объединяет несколько потоков, испуская значения по мере их появления.
    • concat(...observables) — объединяет потоки последовательно, один за другим.
    • combineLatest(...observables) — испускает массив последних значений всех потоков при любом обновлении.

  5. Управление временем (Time-based Operators)

    • debounceTime(ms) — игнорирует значения, поступающие чаще указанного интервала.
    • throttleTime(ms) — пропускает первые значение и блокирует последующие на период ms.
    • delay(ms) — задержка перед выдачей значения.

Примеры использования

Фильтрация и трансформация потока кликов:

import { fromEvent } from 'rxjs';
import { map, filter, throttleTime } from 'rxjs/operators';

const button = document.querySelector('button');
fromEvent(button, 'click').pipe(
  throttleTime(500),
  map(event => event.clientX),
  filter(x => x > 100)
).subscribe(x => console.log(`Клик с координатой X > 100: ${x}`));

Комбинирование нескольких потоков:

import { combineLatest, of, interval } from 'rxjs';
import { map } from 'rxjs/operators';

const streamA = interval(1000);
const streamB = of('A', 'B', 'C');

combineLatest([streamA, streamB]).pipe(
  map(([num, char]) => `${char}${num}`)
).subscribe(console.log);

Важные концепции

  • Hot vs Cold Observables: Hot потоки начинают испускать значения независимо от подписки, Cold — только при наличии подписчиков.
  • Подписка и отписка: использование unsubscribe или takeUntil предотвращает утечки памяти при работе с долгоживущими потоками.
  • Пайплайн операторов: методы pipe позволяют создавать цепочки операторов, обеспечивая чистый и читаемый код.

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

Оглавление