Réagissez aux changements avec les effects

L'avantage principal des Signals est qu'ils permettent de réagir facilement aux changements.

Un effect est une opération qui s'exécute à chaque fois qu'un Signal change de valeur. Si, lors du changement de valeur d'un Signal, vous souhaitez réagir au changement sans modifier la valeur ni en créer une nouvelle, il vous faut un effect.

Voici deux cas d'usage à titre d'exemple :

• le logging, que ce soit pour l'observabilité ou le debug

• la persistence locale, par exemple vialocalStorage

Dans ce chapitre, vous implémenterez les deux !

Émettez à la console

Imaginons qu'on se rende compte que, de temps en temps, on a un bug au niveau de la barre de progression. On décide, pour aider avec le debug, de logger à la console chaque nouvelle valeur du pourcentage de complétion : on va donc implémenter un effect dans ProgressBarComponent.

Première caractéristique importante : par défaut, les effects doivent être générés dans un contexte d'injection. On va donc créer notre effect dans un constructor :

constructor() {
  effect(() => console.log('Progress percentage changed:', this.progressBarWidth()));
}

Si vous regardez maintenant dans la console, sans toucher aux tâches de l'application :

Ça souligne une deuxième caractéristique des effects : ils se déclenchent obligatoirement au moins une fois. C'est également pour cela qu'il faut être très parcimonieux avec leur utilisation : il peut y avoir des conséquences indésirables (transmission de données incomplètes, race conditions…).

Si vous complétez/décomplétez quelques tâches, vous verrez l'effet de votre effect (pardon…) :

Voilà un effect bien implémenté !

À vous de jouer

Contexte

On souhaite garder une trace des tâches en attente dans lelocalStoragedu navigateur de l'utilisateur.

Consigne

• Dans TaskGridComponent, à chaque émission du Signaltasks, si et seulement si les tâches en attente ont changé, vous allez en enregistrer les IDs sous la clépendingTasksdulocalStorage.

• Si un enregistrement est effectué, affichez un message dans la console : ce message vous permettra de savoir si votre effect est bien implémenté !

En résumé

• Un effect est une opération qui est déclenchée à chaque fois que la valeur d'un des Signals dont il dépend change.

• Par défaut, un effect doit être créé dans un contexte d'injection (constructor, champ de classe…)

• Un effect est systématiquement déclenché au moins une fois.

• Il faut utiliser les effects avec parcimonie : si vous vous retrouvez à en écrire souvent, il faut revoir votre implémentation générale !

Après ce dernier chapitre, il est temps de valider vos connaissances avec un quiz !