Что такое реактивное программирование?

Реактивное программирование — это парадигма программирования, ориентированная на потоки данных и распространение изменений. Вместо того чтобы писать код, который явно получает и обрабатывает данные шаг за шагом, вы описываете, как данные должны течь и трансформироваться со временем. Когда значения меняются, обновления автоматически распространяются по вашему приложению. Представьте себе электронную таблицу: когда вы изменяете ячейку A1, все ячейки, ссылающиеся на A1, автоматически пересчитываются. Такой подход отлично справляется с асинхронными событиями, такими как взаимодействия пользователя, ответы HTTP, сообщения WebSocket и таймеры.

Как работает RxJS?

RxJS (Reactive Extensions for JavaScript) реализует реактивное программирование через Observables — объекты, которые испускают значения во времени. Основные понятия:

  1. Observable: источник данных, который испускает значения (например, поток событий кликов или ответы API)
  2. Observer: потребитель, реагирующий на испущенные значения через колбэки (next, error, complete)
  3. Subscription: связь между Observable и Observer
  4. Operators: функции, преобразующие, фильтрующие, комбинирующие или иным образом манипулирующие потоками данных
  5. Subjects: специальные Observables, которые одновременно являются источником и потребителем данных, позволяя мультикастинг

Вы создаёте конвейеры данных, цепляя операторы с помощью метода pipe(), преобразуя сырые потоки в точно такой вид данных, какой нужен вашему приложению.

Описание инструмента

Песочница RxJS — интерактивный браузерный sandbox для экспериментов с концепциями реактивного программирования RxJS. Пишите и исполняйте код RxJS прямо в редакторе с полным доступом к библиотеке RxJS и всем её операторам. Песочница автоматически запускает ваш код по мере ввода (с дебаунсом), выводя результаты в панель в стиле терминала. Идеально подходит для изучения концепций RxJS, прототипирования преобразований данных, отладки конвейеров Observable и тестирования комбинаций операторов без настройки среды разработки.

Возможности

  • Полный доступ к библиотеке RxJS: все функции создания (of, from, interval, fromEvent и др.) и операторы доступны
  • Выполнение в реальном времени: код запускается автоматически с задержкой 500 мс при вводе
  • Вывод в терминал: сообщения console, ошибки и предупреждения отображаются в стилизованном терминале
  • Подсветка синтаксиса: редактор JavaScript с корректной подсветкой кода
  • Отображение возвращаемого значения: финальные значения выражений автоматически выводятся с обозначением стрелки
  • Обработка ошибок: понятные сообщения об ошибках синтаксиса и выполнения
  • Модуль операторов: прямой доступ к rxjs/operators для трансформаций через pipe

Примеры

Базовое создание Observable:

const { of, from, interval } = rxjs;

// Испускание отдельных значений
of(1, 2, 3).subscribe((x) => console.log(x));

// Преобразование массива в Observable
from([10, 20, 30]).subscribe((x) => console.log(x));

Использование операторов:

const { of } = rxjs;
const { map, filter, take } = operators;

of(1, 2, 3, 4, 5)
  .pipe(
    filter((x) => x % 2 === 0),
    map((x) => x * 10),
  )
  .subscribe((x) => console.log(x));
// Вывод: 20, 40

Комбинирование потоков:

const { of, merge, concat } = rxjs;

const stream1 = of("A", "B");
const stream2 = of("X", "Y");

merge(stream1, stream2).subscribe((x) => console.log("merge:", x));
concat(stream1, stream2).subscribe((x) => console.log("concat:", x));

Subjects для мультикастинга:

const { Subject, BehaviorSubject } = rxjs;

const subject = new Subject();
subject.subscribe((v) => console.log("Observer 1:", v));
subject.subscribe((v) => console.log("Observer 2:", v));
subject.next(1);
subject.next(2);

Конвейер трансформаций:

const { from } = rxjs;
const { map, reduce, toArray } = operators;

from([1, 2, 3, 4, 5])
  .pipe(
    map((x) => x * 2),
    toArray(),
  )
  .subscribe((arr) => console.log("Doubled:", arr));

Доступные модули

rxjs (основной модуль):

  • Создание: of, from, interval, timer, range, generate, defer, iif
  • Комбинация: merge, concat, combineLatest, forkJoin, zip, race
  • Subjects: Subject, BehaviorSubject, ReplaySubject, AsyncSubject
  • Утилиты: firstValueFrom, lastValueFrom, isObservable

operators (операторы для pipe):

  • Трансформация: map, pluck, scan, reduce, buffer, switchMap, mergeMap, concatMap
  • Фильтрация: filter, take, takeUntil, skip, debounceTime, throttleTime, distinctUntilChanged
  • Комбинация: withLatestFrom, combineLatestWith, mergeWith, startWith
  • Обработка ошибок: catchError, retry, retryWhen
  • Утилиты: tap, delay, timeout, toArray, share, shareReplay

Сценарии использования

  • Изучение RxJS: понимание концепций Observable через практические эксперименты
  • Прототипирование потоков данных: проектирование и тестирование реактивных конвейеров до их реализации
  • Отладка операторов: изоляция и проверка поведения операторов на упрощённых примерах
  • Подготовка к интервью: практика реактивных паттернов и типовых задач
  • Обучающие демонстрации: показ реактивных концепций в живых интерактивных примерах