Gestion d'état & Temps réel (Front)

1. Gestion d’état avec Signals

1.1 Règle de décision

1. État local : signal() dans le composant.
2. État dérivé : computed().
3. Données serveur : service HTTP direct ; pas de store-cache par réflexe.
4. État partagé transverse : service singleton avec Signals (ex: AuthService).

1.2 Exemple : page sans store global

export class ApplicationListPage {
  private readonly applicationService = inject(ApplicationService);

  readonly applications = signal<Application[]>([]);
  readonly loading = signal(true);

  constructor() {
    this.applicationService.list().pipe(takeUntilDestroyed()).subscribe({
      next: apps => { this.applications.set(apps); this.loading.set(false); }
    });
  }
}

2. Communication temps réel

La frontière WebSocket conserve RxJS pour le flux réseau, puis expose des Signals via toSignal().

core/realtime/realtime.service.ts

export class RealtimeService {
  private readonly eventsSubject = new Subject<RealtimeEvent>();
  readonly events$ = this.eventsSubject.asObservable().pipe(share());

  connect(): void {
    this.socket = new WebSocket(...);
    this.socket.onmessage = ({ data }) => {
      this.zone.run(() => this.eventsSubject.next(JSON.parse(data)));
    };
  }
}

Interopérabilité :

• toSignal(events$) pour consommer dans le template.
• toObservable(searchSignal) pour déclencher des requêtes HTTP debouncées.