Що таке subject і які типи subject існують в RxJS?

Що таке Subject в RxJS?

Subject — це спеціальний тип Observable, який може мультикастити дані: тобто надсилати значення кільком підписникам одночасно.

Він поєднує пропси Observable (випускає значення) та Observer (може передавати значення за допомогою .next()).

Особливості

Ви ініціюєте передачу значення через .next()
Підписники отримують одні й ті ж дані
Дозволяє централізоване управління потоком подій

Приклад використання Regular Subject

typescript

import { Subject } from 'rxjs';

const subject = new Subject<string>();

subject.subscribe(val => console.log('Підписник A:', val));
subject.subscribe(val => console.log('Підписник B:', val));

subject.next('Привіт'); 
// → Підписник A: Привіт
// → Підписник B: Привіт

Типи Subject

RxJS надає кілька типів Subject, які відрізняються поведінкою та зберіганням значень:

Тип	Зберігає значення?	Що отримує новий підписник
`Subject`	Ні	Тільки нові значення після підписки
`BehaviorSubject`	Так (тільки останнє)	Негайно отримує останнє значення
`ReplaySubject`	Так (усі або частину)	Отримує всі/кілька минулих значень
`AsyncSubject`	Так (тільки фінальне)	Отримує тільки останнє, коли `complete()`

BehaviorSubject

Використовується, коли потрібно, щоб підписники отримували поточне значення негайно після підписки.

typescript

import { BehaviorSubject } from 'rxjs';

const behavior$ = new BehaviorSubject<number>(0);

behavior$.subscribe(val => console.log('A:', val)); // A: 0
behavior$.next(1); // A: 1
behavior$.subscribe(val => console.log('B:', val)); // B: 1

Ідеально підходить для зберігання стану (наприклад, поточного користувача, теми додатку тощо).

ReplaySubject

Дозволяє "відтворювати" минулі значення для нових підписників.

typescript

import { ReplaySubject } from 'rxjs';

const replay$ = new ReplaySubject<number>(2); // зберігає 2 останні значення

replay$.next(1);
replay$.next(2);
replay$.next(3);

replay$.subscribe(val => console.log('Підписник:', val));
// → Підписник: 2
// → Підписник: 3

AsyncSubject

Випускає тільки останнє значення — тільки коли потік завершено (complete())

typescript

import { AsyncSubject } from 'rxjs';

const async$ = new AsyncSubject<number>();

async$.subscribe(val => console.log('Результат:', val));

async$.next(1);
async$.next(2);
async$.next(3);

async$.complete(); // → Результат: 3

Використовується для відкладених значень, наприклад, при виконанні одноразового запиту даних.

Коли використовувати який?

Сценарій	Subject
Потік подій (наприклад, кнопки)	`Subject`
Зберігання стану	`BehaviorSubject`
Історія повідомлень або журналу	`ReplaySubject`
Тільки результат після завершення операції	`AsyncSubject`

Порада:

В Angular BehaviorSubject найчастіше використовується для управління станом компонентів і сервісів, оскільки гарантує поточне значення при підписці.

Зміст

Що таке Subject в RxJS?ОсобливостіРегулярний приклад використання SubjectТипи SubjectBehaviorSubjectReplaySubjectAsyncSubjectКоли використовувати який?

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

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

Premium

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

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

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