Améliorer les effets secondaires dans Angular avec la méthode signal de NgRx

NgRx a toujours été une bibliothèque de confiance pour la gestion de l'état dans les applications angulaires. Avec l'introduction de son API Signals, les développeurs disposent désormais d'un moyen plus simple de gérer les changements d'état et les effets secondaires. Pour gérer ces effets secondaires, l'équipe NgRx a récemment introduit la méthode signalMethod qui simplifie les flux de travail réactifs et les rend plus intuitifs.

Dans cet article, je vais plonger dans la méthode signalMethod, en montrant comment elle fonctionne à travers des exemples pratiques et pourquoi elle constitue un excellent ajout à votre boîte à outils Angular.

---

Qu’est-ce que la méthode signal ?

Le signalMethod est un utilitaire introduit par NgRx qui vous permet de gérer les effets secondaires de manière propre et réactive. Contrairement aux approches traditionnelles qui peuvent s'appuyer sur des opérateurs RxJS ou sur la gestion manuelle des effets, signalMethod vous permet de vous concentrer sur ce qui compte : la logique de gestion des changements.

Il y parvient en combinant des signaux avec une fonction de processeur. Cette fonction réagit aux changements de son entrée, qu'il s'agisse d'une valeur statique ou d'un signal réactif. Le résultat est un moyen flexible mais puissant de gérer les actions pilotées par l'État.

---

Configuration d'une action basée sur le signal

Commençons par un exemple simple : enregistrer un message chaque fois qu'un nombre double. Voici comment y parvenir en utilisant signalMethod :

import { Component } from '@angular/core';
import { signalMethod } from '@ngrx/signals';

@Component({
  selector: 'app-math-logger',
  template: `<button (click)="increment()">Increment</button>`
})
export class MathLoggerComponent {
  private counter = signal(1);

  // Define the signal method
  readonly logDoubledValue = signalMethod<number>((value) => {
    const doubled = value * 2;
    console.log(`Doubled Value: ${doubled}`);
  });

  increment() {
    this.counter.set(this.counter() + 1);
    this.logDoubledValue(this.counter);
  }
}

Ici, logDoubledValue est invoqué chaque fois que la méthode d'incrémentation est appelée. La valeur du compteur est transmise à signalMethod, qui enregistre ensuite la valeur doublée. Cet exemple montre avec quelle facilité signalMethod s'intègre aux signaux pour réagir aux changements d'état.

---

Réagir dynamiquement aux signaux

Supposons que vous travailliez sur un système de surveillance de la température. Au lieu d'enregistrer des valeurs doublées, vous devez alerter l'utilisateur si la température dépasse un seuil. Avec signalMethod, cela devient simple :

@Component({
  selector: 'app-temperature-monitor',
  template: `<button (click)="increaseTemperature()">Increase Temperature</button>`
})
export class TemperatureMonitorComponent {
  private temperature = signal(20); // Start at 20°C

  readonly alertHighTemperature = signalMethod<number>((temp) => {
    if (temp > 30) {
      console.warn('Warning: High temperature detected!');
    }
  });

  increaseTemperature() {
    this.temperature.set(this.temperature() + 5);
    this.alertHighTemperature(this.temperature);
  }
}

Chaque fois que la température augmente, la méthode alertHighTemperature évalue la nouvelle valeur et émet un avertissement si elle est trop élevée.

---

Contrôle du nettoyage des services

Dans certains cas, vous pouvez définir signalMethod dans un service plutôt que directement dans un composant. Cela permet une meilleure réutilisation mais nécessite une gestion minutieuse des effets secondaires pour éviter les fuites de mémoire.

Voici un exemple :

import { Injectable } from '@angular/core';
import { signalMethod } from '@ngrx/signals';

@Injectable({ providedIn: 'root' })
export class ScoreService {
  readonly logScore = signalMethod<number>((score) => {
    console.log(`Current Score: ${score}`);
  });
}

Maintenant, supposons qu'un composant utilise ce service :

@Component({
  selector: 'app-score-tracker',
  template: `<button (click)="updateScore()">Update Score</button>`
})
export class ScoreTrackerComponent {
  private scoreService = inject(ScoreService);

  private score = signal(0);

  updateScore() {
    this.score.set(this.score() + 10);
    this.scoreService.logScore(this.score); // Signal-driven action
  }
}

Pour éviter les fuites de mémoire, assurez-vous d'injecter le contexte du composant lors de l'utilisation du service dans des scénarios dynamiques :

import { Injector } from '@angular/core';

@Component({ /* ... */ })
export class ScoreTrackerComponent {
  private injector = inject(Injector);
  private scoreService = inject(ScoreService);

  private score = signal(0);

  updateScore() {
    this.score.set(this.score() + 10);
    this.scoreService.logScore(this.score, { injector: this.injector });
  }
}

---

Pourquoi choisir la méthode signal ?

Par rapport à d'autres outils comme effect, signalMethod offre des avantages distincts :

1. Flexibilité : Il peut traiter à la fois des valeurs statiques et des signaux réactifs, ce qui le rend idéal pour les scénarios mixtes.
2. Suivi explicite des dépendances : suit uniquement le signal fourni, réduisant ainsi le risque de dépendances involontaires.
3. Gestion simplifiée du contexte : fonctionne de manière transparente dans les contextes d'injection angulaire et permet un contrôle manuel en cas de besoin.

---

Une note sur quand utiliser signalMethod

Bien que signalMethod soit parfait pour gérer les effets secondaires simples dans les flux de travail réactifs, il existe des scénarios dans lesquels RxJS pourrait être mieux adapté, en particulier pour les flux complexes ou les cas impliquant des conditions de concurrence. Cependant, pour les applications exploitant les signaux NgRx, signalMethod atteint un équilibre parfait entre simplicité et puissance.

---

Pensées finales

La méthode signalMethod de NgRx change la donne pour la gestion des effets secondaires dans les applications angulaires. En combinant l'élégance des signaux avec la flexibilité des fonctions du processeur, il simplifie les modèles réactifs tout en gardant le contrôle sur le nettoyage et les dépendances.

Si vous utilisez des signaux NgRx dans vos projets, je vous recommande fortement d'explorer signalMethod pour rationaliser votre gestion des effets secondaires. Essayez-le et découvrez comment il peut rendre vos applications angulaires plus propres et plus réactives !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!