Angular Academy · Lezione

Effect ed effetti collaterali

Reagisca alle modifiche dei signal con gli effect.

Effect ed effetti collaterali è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Che cos'è un effect

Un effect() esegue una funzione ogni volta che cambia un signal letto al suo interno. A differenza dei computed, gli effect servono per gli effetti collaterali: logging, sincronizzazione con localStorage, chiamate alle API e manipolazione del DOM.

Gli effect non restituiscono un valore.

Creare un effect

Un effect viene eseguito subito una volta, quindi viene rieseguito ogni volta che cambia un signal tracciato.

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"

Gli effect richiedono un contesto di injection

Per impostazione predefinita, effect() deve essere creato in un contesto di injection, in genere nel costruttore o nell'inizializzatore di un campo di un componente, una direttiva o un servizio.

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()));
  }
}

Rilevamento automatico delle dipendenze

Come i computed, gli effect tracciano esattamente i signal letti durante l'esecuzione. Le letture condizionali vengono tracciate solo quando il relativo ramo viene raggiunto.

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

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

Sincronizzare i signal con localStorage

Un caso d'uso classico degli effect è rendere persistente lo stato ogni volta che cambia.

const theme = signal('light');

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

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

Gli effect non restituiscono valori

Se ha bisogno di un valore derivato, usi computed(). Gli effect servono per azioni senza valore restituito: il loro risultato è l'effetto collaterale stesso.

// 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());

Impostare signal negli effect

Per impostazione predefinita, Angular non consente di scrivere nei signal all'interno di un effect, per evitare loop. Se ne ha davvero bisogno, passi { allowSignalWrites: true }, ma preferisca computed per le derivazioni.

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

Pulizia manuale con EffectRef

effect() restituisce un EffectRef. Chiami .destroy() per interromperlo manualmente prima della distruzione del proprietario.

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

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

Gli effect vengono ripuliti automaticamente

Quando viene creato in un componente, un effect viene distrutto automaticamente quando il componente viene distrutto. Raramente è necessario chiamare personalmente .destroy().

Gli effect vengono eseguiti dopo il rendering

Gli effect vengono pianificati ed eseguiti dopo la change detection, raggruppati per microtask. Più modifiche sincrone a un signal attivano l'effect una sola volta.

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)

Quando usare effect invece di computed

computed: ricavare un valore dai signal (in modo puro).
effect: reagire ai signal eseguendo un'azione esterna (in modo impuro).

Se si accorge di restituire un valore da un effect, probabilmente dovrebbe usare un computed.

Verifica rapida

Verifichi la propria comprensione degli effect.

Riepilogo: effect

effect() esegue una funzione ogni volta che cambiano i signal tracciati, esclusivamente per gli effetti collaterali.

Viene eseguito subito una volta, quindi a ogni cambiamento di una dipendenza.
Richiede un contesto di injection.
Viene distrutto automaticamente con il proprietario e restituisce un EffectRef per il controllo manuale.
Usi computed per le derivazioni ed effect per le azioni.

Prossimo argomento: pulire le risorse all'interno degli effect.

Domande Frequenti

La lezione «Effect ed effetti collaterali» è gratuita?

Sì — il testo completo di «Effect ed effetti collaterali» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Effect ed effetti collaterali»?

Reagisca alle modifiche dei signal con gli effect. Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Effect ed effetti collaterali»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy