Angular Academy · Lezione

Aggiornare lo stato in modo immutabile

Applicare aggiornamenti immutabili allo stato dei signal

Aggiornare lo stato in modo immutabile è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 3 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.

Perché l'immutabilità

I signal rilevano i cambiamenti tramite il riferimento. Se modifica direttamente un array o un oggetto, il riferimento rimane invariato e i signal computed() dipendenti potrebbero non essere ricalcolati. Crei sempre un riferimento nuovo.

La trappola della mutazione

Aggiungere un elemento a un array esistente lo modifica senza cambiare il riferimento. Eviti questa pratica.

// BAD: mutates in place, reference unchanged
this._items.update(list => { list.push(item); return list; });

Spread per gli array

Crei un nuovo array con l'operatore spread, così il riferimento cambia e i consumer rieseguono il calcolo.

// GOOD: new array reference
this._items.update(list => [...list, item]);

Rimozione degli elementi

Usi filter(), che restituisce un array completamente nuovo lasciando intatto quello originale.

removeItem(id: string) {
  this._items.update(list => list.filter(i => i.id !== id));
}

Aggiornamento di un elemento

Usi map() per restituire un nuovo array e copi l'oggetto corrispondente in un nuovo oggetto con lo spread, così cambia anche il riferimento interno.

markDone(id: string) {
  this._items.update(list =>
    list.map(i => i.id === id ? { ...i, done: true } : i));
}

Spread per gli oggetti

Per lo stato rappresentato da un oggetto, copi con lo spread l'oggetto precedente e sovrascriva i campi modificati. Anche gli oggetti annidati richiedono il proprio spread.

private _profile = signal({ name: '', address: { city: '' } });

setCity(city: string) {
  this._profile.update(p => ({ ...p, address: { ...p.address, city } }));
}

set con un valore nuovo

Quando sostituisce completamente lo stato, usare set() con un nuovo oggetto è naturalmente immutabile, perché si fornisce un riferimento nuovo.

reset() {
  this._profile.set({ name: '', address: { city: '' } });
}

Perché computed dipende da questo

Poiché i modelli di lettura computed dipendono dal riferimento del signal, gli aggiornamenti immutabili garantiscono il ricalcolo. Una mutazione che mantiene lo stesso riferimento dell'array può lasciare silenziosamente obsoleti totali e filtri.

Schemi di supporto

Estragga piccoli helper puri per le trasformazioni comuni, così i metodi dello store rimangono leggibili e coerenti.

const upsert = (list: Item[], item: Item) =>
  list.some(i => i.id === item.id)
    ? list.map(i => i.id === item.id ? item : i)
    : [...list, item];

save(item: Item) { this._items.update(l => upsert(l, item)); }

Attenzione al nesting profondo

Uno stato profondamente annidato richiede molti spread. Se gli aggiornamenti diventano difficili da gestire, appiattisca la struttura dello stato oppure la suddivida in più signal, in modo che ogni aggiornamento riguardi una porzione ridotta.

L’immutabilità facilita il debug

Poiché ogni aggiornamento produce un nuovo riferimento, può confrontare gli snapshot nel tempo, registrare lo stato precedente e quello successivo e ragionare sulle modifiche senza preoccuparsi di modifiche nascoste in loco.

Verifica rapida

Verifichi la sua comprensione degli aggiornamenti immutabili dei signal.

Riepilogo

Ha appreso i pattern di aggiornamento immutabile: spread per array e oggetti, map/filter per modifiche e rimozioni, nuovi riferimenti tramite set e il motivo per cui l’uguaglianza dei riferimenti rende l’immutabilità essenziale per una reattività corretta.

Domande Frequenti

La lezione «Aggiornare lo stato in modo immutabile» è gratuita?

Sì — il testo completo di «Aggiornare lo stato in modo immutabile» è 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 «Aggiornare lo stato in modo immutabile»?

Applicare aggiornamenti immutabili allo stato dei signal 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 3 di 4.

Quanto tempo richiede la lezione «Aggiornare lo stato in modo immutabile»?

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