О курсе RxJS

🌊 RxJS — Реактивное программирование на практике

Привет, Яша! 👋 Сегодня мы начинаем изучать одну из самых мощных библиотек в мире JavaScript — RxJS. Это немного другой способ думать о коде, но как только ты его поймёшь — всё станет на свои места 🧩

---

Что такое RxJS? 🤔

RxJS (Reactive Extensions for JavaScript) — это библиотека для работы с асинхронными потоками данных и событиями.

Представь себе реку 🏞️. Данные — это вода, которая постоянно течёт. Ты можешь:

• наблюдать за водой (subscribe)
• фильтровать её (filter)
• трансформировать (map)
• комбинировать несколько рек в одну (merge, combineLatest)

Это и есть реактивное программирование!

// Без RxJS — колбэки и промисы
button.addEventListener('click', () => {
  fetch('/api/data')
    .then(res => res.json())
    .then(data => render(data))
    .catch(err => handleError(err));
});

// С RxJS — потоки данных
fromEvent(button, 'click').pipe(
  switchMap(() => from(fetch('/api/data').then(r => r.json()))),
  catchError(err => of({ error: err }))
).subscribe(data => render(data));

---

Зачем это нужно? 💡

Проблемы без RxJS

1. Callback Hell — вложенные колбэки как матрёшка 🪆
2. Управление состоянием — сложно отменить запросы, debounce, throttle
3. Комбинирование событий — что если нам нужно подождать два API одновременно?

RxJS решает всё элегантно

// Поиск с debounce — без RxJS это ~20 строк кода
// С RxJS — 5 строк!
fromEvent(searchInput, 'input').pipe(
  debounceTime(300),          // ждём паузу 300мс
  map(e => e.target.value),   // берём значение
  distinctUntilChanged(),      // пропускаем если не изменилось
  switchMap(query => searchApi(query)) // отменяем старый запрос
).subscribe(results => showResults(results));

---

Реактивное программирование — это парадигма 🧠

Существуют разные парадигмы программирования:

Парадигма	Описание	Пример
Императивная	Говоришь компьютеру КАК делать	for циклы, if условия
Декларативная	Говоришь ЧТО хочешь получить	SQL, React JSX
Функциональная	Цепочки чистых функций	.map().filter().reduce()
Реактивная ⭐	Реагируешь на изменения данных	RxJS, потоки событий

RxJS — это функционально-реактивное программирование. Сочетание лучшего из двух миров!

---

RxJS vs Promises vs Callbacks 🥊

// CALLBACKS — старый способ
getData(function(err, data) {
  if (err) handleError(err);
  else processData(data, function(err2, result) {
    // ещё глубже... и глубже... 😵
  });
});

// PROMISES — лучше, но всё ещё ограничено
getData()
  .then(data => processData(data))
  .then(result => render(result))
  .catch(handleError);
// ⚠️ Promise — одно значение, нельзя отменить

// RxJS OBSERVABLE — поток значений!
getData().pipe(
  switchMap(data => processData(data))
).subscribe({
  next: result => render(result),
  error: handleError,
  complete: () => console.log('Готово!')
});
// ✅ Много значений, можно отменить, мощные операторы

Сравнение по ключевым характеристикам

Характеристика	Callback	Promise	Observable
Количество значений	Одно	Одно	Много ♾️
Отмена	❌ Сложно	❌ Нельзя	✅ unsubscribe()
Ленивость	❌ Сразу	❌ Сразу	✅ Ленивый
Операторы	❌ Нет	Немного	✅ 100+
Обработка ошибок	Сложно	.catch()	catchError()
Синхронность	Оба	Только async	Оба

---

Ключевые концепции курса 🗺️

Вот что мы изучим в этом курсе:

#	Тема	Что узнаем
1	📦 Observables	Основа всего. Что такое Observable, как создавать
2	👁️ Observers & Subscriptions	Как подписываться и отписываться
3	📡 Subjects	Горячие потоки, BehaviorSubject, ReplaySubject
4	🔧 Операторы: Введение	pipe(), трансформация, фильтрация
5	🗺️ Операторы: Трансформация	map, switchMap, mergeMap, concatMap
6	🔍 Операторы: Фильтрация	filter, take, debounceTime, distinctUntilChanged
7	🔗 Операторы: Комбинирование	combineLatest, forkJoin, merge, zip
8	🛡️ Обработка ошибок	catchError, retry, throwError
9	🏗️ RxJS в React	Хуки + RxJS, подписки в компонентах
10	🚀 Реальные паттерны	Поиск, корзина, WebSocket

---

Аналогия для понимания 🎬

Думай об Observable как о Netflix:

• 🎬 Observable = стриминговый сервис (источник данных)
• 👀 Subscribe = нажать “Смотреть” (начать получать данные)
• ⏸️ Unsubscribe = нажать “Стоп” (перестать получать)
• 🎛️ Operators = пульт управления (перемотка, субтитры, качество)
• 📺 Observer = ты сам (получаешь и обрабатываешь данные)

Пока ты не нажал “Смотреть” — ничего не происходит. Observable ленивый! 😴

---

Установка и настройка 🛠️

npm install rxjs

# Или в уже существующем проекте
npm install rxjs

// Импорт — берём только то что нужно (tree-shaking!)
import { Observable, Subject, BehaviorSubject } from 'rxjs';
import { map, filter, debounceTime, switchMap } from 'rxjs/operators';
import { of, from, interval, fromEvent } from 'rxjs';

---

Первый пример — просто попробуй! 🎯

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

// Создаём поток из массива чисел
const numbers$ = of(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
// Знак $ в конце — соглашение для Observable переменных

numbers$.pipe(
  filter(n => n % 2 === 0),  // только чётные
  map(n => n * n)             // возводим в квадрат
).subscribe(n => console.log(n));

// Вывод: 4, 16, 36, 64, 100

Видишь как это читается? “Из чисел 1-10, возьми чётные и возведи в квадрат”. Почти как человеческий язык! 🗣️

---

Готов начать? 🚀

В следующем уроке мы погрузимся в Observables — самую важную концепцию RxJS. Поехали! →