Що таке RxJS і як він інтегрується в Angular?

Що таке RxJS?

RxJS (Reactive Extensions for JavaScript) — це бібліотека для реактивного програмування, основана на потоках даних та спостережуваних значеннях (Observables).

RxJS надає потужні інструменти для роботи з:

асинхронними подіями,
потоками даних (наприклад, HTTP запити, WebSocket, події DOM),
таймерами, введенням з клавіатури, змінами форм тощо.

Як працює RxJS?

В основі RxJS лежить Observable — об'єкт, який випромінює дані з часом, до якого ви можете підписатися (subscribe) і обробляти за допомогою операторів (pipe).

typescript

import { Observable } from 'rxjs';

const obs$ = new Observable(observer => {
  observer.next('Hello');
  observer.next('RxJS');
  observer.complete();
});

obs$.subscribe(value => console.log(value));

Виведе: Hello, потім RxJS.

Як RxJS інтегровано в Angular?

В Angular RxJS вбудовано за замовчуванням і використовується в майже кожному важливому елементі фреймворку:

Де використовується RxJS в Angular	Як саме
`HttpClient`	Повертає Observable замість Promise
Реактивні форми	Підтримка реактивних змін (`valueChanges`)
Роутер	Слухання навігації (`router.events`)
Сервіси та стан	Використання `Subject`, `BehaviorSubject` та інших
Async Pipe	Автоматична підписка та відписка від Observable

Приклад: HTTP запит з RxJS в Angular

typescript

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-users',
  template: `<ul><li *ngFor="let user of users">{{ user.name }}</li></ul>`
})
export class UsersComponent implements OnInit {
  users: any[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get<any[]>('https://jsonplaceholder.typicode.com/users')
      .subscribe(data => this.users = data);
  }
}

Основні оператори RxJS

Оператори використовуються в .pipe() для обробки потоків:

Категорія	Приклади	Опис
Фільтрація	`filter`, `take`, `debounceTime`	Пропустити/вибрати потрібні значення
Трансформація	`map`, `switchMap`, `mergeMap`	Трансформувати або замінити потік
Комбінування	`combineLatest`, `withLatestFrom`	Комбінування кількох Observables
Обробка помилок	`catchError`, `retry`	Обробка помилок

Приклад з pipe:

typescript

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

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

Subject vs BehaviorSubject

Subject — не зберігає попереднє значення, підписники отримують лише нові
BehaviorSubject — зберігає останнє значення і передає його новим підписникам

Управління підписками
Важливо відписуватися від підписок, щоб уникнути витоків пам'яті:

typescript

import { Subscription } from 'rxjs';

export class MyComponent implements OnDestroy {
  private sub!: Subscription;

  ngOnInit() {
    this.sub = this.myService.getData().subscribe();
  }

  ngOnDestroy() {
    this.sub.unsubscribe(); // обов'язково!
  }
}

Або використовуйте async pipe:

html

<div *ngIf="data$ | async as data">
  {{ data }}
</div>

Angular автоматично управляє підпискою та відпискою.

RxJS в Angular:

RxJS є основою реактивного підходу в Angular. Здатність працювати з Observables, операторами та Subject — ключ до створення продуктивних і масштабованих додатків.

Зміст

Що таке RxJS? Як працює RxJS? Як RxJS інтегровано в Angular? Приклад: HTTP запит з RxJS в Angular Основні оператори RxJS Subject vs BehaviorSubject

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Що таке RxJS і як він інтегрується в Angular?