Чем отличается Subject от BehaviorSubject в RxJS? Примеры на TypeScript

Основные отличия Subject и BehaviorSubject

Вы правильно заметили ключевую разницу. Давайте разберемся подробнее.

Subject — это простой "ретранслятор". Он передает значения только тем подписчикам, которые подписались в момент отправки или после него. Если подписчик опоздал — он ничего не получит из прошлого.

BehaviorSubject — это Subject, который помнит последнее значение. Каждый новый подписчик немедленно получает это последнее значение (или начальное, если никаких значений не было отправлено).

Почему BehaviorSubject требует начальное значение?

Потому что он должен гарантировать, что у каждого нового подписчика будет хотя бы одно значение. Если бы начальное значение не требовалось, то при подписке до первого next() подписчик не получил бы ничего, что нарушило бы контракт BehaviorSubject.

Когда что использовать?

Subject подходит, когда:

• Вам не нужно "воспроизводить" прошлые события новым подписчикам
• Вы создаете "одноразовые" события (например, клик по кнопке)
• Вы работаете с потоками, где важна только текущая информация

BehaviorSubject подходит, когда:

• Вам нужно хранить и передавать текущее состояние (например, данные пользователя, настройки приложения)
• Новые подписчики должны сразу получить актуальное значение
• Вы реализуете паттерн "Service + State Management" в Angular

Практический пример на TypeScript

Представьте сервис для управления корзиной покупок:

import { Injectable } from '@angular/core';
import { BehaviorSubject, Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class CartService {
  // BehaviorSubject для хранения текущего состояния корзины
  private cartItemsSubject = new BehaviorSubject<string[]>([]);
  cartItems$ = this.cartItemsSubject.asObservable();

  // Subject для уведомления о конкретных действиях
  private itemRemovedSubject = new Subject<string>();
  itemRemoved$ = this.itemRemovedSubject.asObservable();

  addItem(item: string): void {
    const currentItems = this.cartItemsSubject.getValue();
    this.cartItemsSubject.next([...currentItems, item]);
  }

  removeItem(item: string): void {
    const currentItems = this.cartItemsSubject.getValue();
    this.cartItemsSubject.next(currentItems.filter(i => i !== item));
    this.itemRemovedSubject.next(item); // Уведомляем о удалении
  }
}

// В компоненте:
export class CartComponent implements OnInit {
  cartItems: string[] = [];

  constructor(private cartService: CartService) {}

  ngOnInit() {
    // Сразу получим текущее состояние корзины
    this.cartService.cartItems$.subscribe(items => {
      this.cartItems = items;
    });

    // Подпишемся на уведомления об удалении
    this.cartService.itemRemoved$.subscribe(item => {
      console.log(`Товар "${item}" удален из корзины`);
    });
  }
}

В этом примере:

• cartItems$ (BehaviorSubject) — новый компонент сразу получит актуальный список товаров
• itemRemoved$ (Subject) — если компонент подписался позже, он не узнает о предыдущих удалениях, что логично — ему это не нужно

Дополнительные методы

У BehaviorSubject есть метод getValue(), который позволяет синхронно получить последнее значение (без подписки). У обычного Subject такого метода нет.

const subject = new BehaviorSubject<number>(0);
subject.next(5);
console.log(subject.getValue()); // 5

Также BehaviorSubject поддерживает ReplaySubject (еще один вариант Subject), который может воспроизводить не одно, а несколько последних значений. Но это уже другая история.

Надеюсь, теперь стало понятнее! Если остались вопросы — спрашивайте.

const userSubject = new BehaviorSubject<User | null>(null);

const replaySubject = new ReplaySubject<number>(2);
replaySubject.next(1);
replaySubject.next(2);
replaySubject.next(3);

replaySubject.subscribe(v => console.log(v)); // 2, 3 (последние 2 значения)