Сервисы состояния

Сервисы состояния — это основной механизм управления данными и состояниями приложения, обеспечивающий единую точку правды и возможность масштабирования логики компонентов.

Создание и регистрация сервиса

Сервис создаётся с помощью декоратора @Injectable и регистрируется в модуле или через providedIn: 'root' для глобальной доступности.

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

@Injectable({
  providedIn: 'root'
})
export class CounterService {
  private counterSubject = new BehaviorSubject<number>(0);
  counter$ = this.counterSubject.asObservable();

  increment() {
    this.counterSubject.next(this.counterSubject.value + 1);
  }

  decrement() {
    this.counterSubject.next(this.counterSubject.value - 1);
  }

  reset() {
    this.counterSubject.next(0);
  }
}

Использование BehaviorSubject обеспечивает возможность подписки на текущее состояние и реактивное обновление компонентов при изменении данных.

Подключение сервиса к компоненту

@Component({
  selector: 'app-counter',
  template: `
    <div>Counter: {{ counter$ | async }}</div>
    <button (click)="increment()">+</button>
    <button (click)="decrement()">-</button>
    <button (click)="reset()">Reset</button>
  `
})
export class CounterComponent {
  counter$ = this.counterService.counter$;

  constructor(private counterService: CounterService) {}

  increment() {
    this.counterService.increment();
  }

  decrement() {
    this.counterService.decrement();
  }

  reset() {
    this.counterService.reset();
  }
}

Сервис состояния обеспечивает:

  • Централизацию логики, чтобы компоненты оставались «тонкими» и фокусировались на отображении.
  • Согласованность данных между компонентами, независимо от уровня вложенности.
  • Лёгкую тестируемость, так как сервисы можно подменять заглушками или моками.

Продвинутые паттерны

  • Facade — сервис, который агрегирует данные и методы нескольких других сервисов, упрощая взаимодействие компонентов с состоянием.
  • Store-подход с использованием RxJS и NgRx позволяет управлять сложным состоянием приложения через поток событий, reducers и селекторы.
  • Ленивая инициализация состояния с использованием BehaviorSubject или ReplaySubject позволяет загружать данные только при необходимости, экономя ресурсы.

Сервисы состояния являются фундаментальной частью архитектуры Angular, делая приложения более управляемыми, предсказуемыми и удобными для расширения.

Оглавление