Angular Academy · Leçon

Effets et effets secondaires

Réagissez aux changements des signaux avec des effets.

Effets et effets secondaires est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Qu’est-ce qu’un effet

Un effect() exécute une fonction chaque fois qu’un signal lu par cette fonction change. Contrairement à computed, les effets servent aux effets secondaires : journaliser, synchroniser avec localStorage, appeler des API ou manipuler le DOM.

Les effets ne renvoient aucune valeur.

Créer un effet

Un effet s’exécute immédiatement une fois, puis à chaque modification d’un signal suivi.

import { signal, effect } from '@angular/core';

const count = signal(0);

effect(() => {
  console.log('count is', count());
});
// logs "count is 0" immediately
count.set(5); // logs "count is 5"

Les effets nécessitent un contexte d’injection

Par défaut, effect() doit être créé dans un contexte d’injection — généralement dans le constructeur ou l’initialiseur d’un champ d’un composant, d’une directive ou d’un service.

import { Component, signal, effect } from '@angular/core';

@Component({ selector: 'app-x', template: '' })
export class XComponent {
  user = signal('guest');
  constructor() {
    effect(() => console.log('user:', this.user()));
  }
}

Suivi automatique des dépendances

Comme les computed, les effets suivent exactement les signaux qu’ils lisent à l’exécution. Les lectures conditionnelles ne sont suivies que lorsque la branche correspondante est atteinte.

const enabled = signal(true);
const value = signal(10);

effect(() => {
  if (enabled()) {
    console.log(value());
  }
});
// When enabled() is false, value is not a dependency

Synchroniser les signaux avec localStorage

Un cas d’utilisation classique d’un effet consiste à conserver l’état chaque fois qu’il change.

const theme = signal('light');

effect(() => {
  localStorage.setItem('theme', theme());
});

theme.set('dark'); // writes "dark" to localStorage

Les effets ne renvoient pas de valeurs

Si vous avez besoin d’une valeur dérivée, utilisez computed(). Les effets servent aux actions sans valeur de retour ; leur résultat est l’effet secondaire lui-même.

// WRONG: trying to derive state in an effect
// effect(() => this.total = this.a() + this.b());

// RIGHT: derive with computed
// total = computed(() => this.a() + this.b());

Définir des signaux dans les effets

Par défaut, Angular interdit l’écriture dans les signaux à l’intérieur d’un effet afin d’éviter les boucles. Si vous en avez réellement besoin, passez { allowSignalWrites: true } — mais préférez computed pour les dérivations.

effect(() => {
  const v = source();
  derived.set(v * 2);
}, { allowSignalWrites: true });
// Use sparingly; computed() is usually better

Nettoyage manuel avec EffectRef

effect() renvoie un EffectRef. Appelez .destroy() pour l’arrêter manuellement avant la destruction de son propriétaire.

import { effect, EffectRef } from '@angular/core';

const ref = effect(() => console.log(value()));
// later
ref.destroy(); // effect no longer runs

Les effets sont nettoyés automatiquement

Lorsqu’un effet est créé dans un composant, il est automatiquement détruit lorsque le composant est détruit. Vous devez rarement appeler vous-même .destroy().

Les effets s’exécutent après le rendu

Les effets sont planifiés et s’exécutent après la détection des changements, regroupés par microtâche. Plusieurs changements synchrones de signaux ne déclenchent l’effet qu’une seule fois.

const a = signal(0);

effect(() => console.log(a()));

a.set(1);
a.set(2);
a.set(3);
// Effect runs once with the final value 3 (batched)

Quand utiliser effect plutôt que computed

computed : dériver une valeur à partir de signaux (pur).
effect : réagir aux signaux en effectuant une action externe (impur).

Si vous vous retrouvez à renvoyer une valeur depuis un effet, vous avez probablement besoin d’un computed.

Vérification rapide

Testez votre compréhension des effets.

Récapitulatif : effets

effect() exécute une fonction chaque fois que les signaux qu’elle suit changent, uniquement pour produire des effets secondaires.

S’exécute immédiatement une fois, puis à chaque modification d’une dépendance.
Nécessite un contexte d’injection.
Est automatiquement détruit avec son propriétaire ; renvoie un EffectRef pour un contrôle manuel.
Utilisez computed pour les dérivations et effect pour les actions.

Ensuite : nettoyer les ressources dans les effets.

Questions Fréquemment Posées

La leçon « Effets et effets secondaires » est-elle gratuite ?

Oui — le texte complet de « Effets et effets secondaires » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Effets et effets secondaires » ?

Réagissez aux changements des signaux avec des effets. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Effets et effets secondaires » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Angular Academy