Angular Academy · Lektion

Zustand unveränderlich aktualisieren

Unveränderliche Aktualisierungen auf Signalzustände anwenden

Zustand unveränderlich aktualisieren ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum Immutabilität?

Signale erkennen Änderungen anhand der Referenz. Wenn Sie ein Array oder Objekt direkt verändern, bleibt die Referenz gleich, und abhängige computed()-Signale werden möglicherweise nicht neu berechnet. Erzeugen Sie immer eine neue Referenz.

Die Mutationsfalle

Wenn Sie ein vorhandenes Array mit push() erweitern, verändern Sie es, ohne die Referenz zu ändern. Vermeiden Sie das.

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

Spread für Arrays

Erstellen Sie mit dem Spread-Operator ein neues Array, damit sich die Referenz ändert und Verbraucher erneut ausgeführt werden.

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

Elemente entfernen

Verwenden Sie filter(). Diese Methode gibt ein völlig neues Array zurück und lässt das ursprüngliche unverändert.

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

Ein Element aktualisieren

Verwenden Sie map(), um ein neues Array zurückzugeben. Übernehmen Sie das passende Objekt in eine frische Kopie, damit sich auch die innere Referenz ändert.

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

Spread für Objekte

Bei einem Objektzustand übernehmen Sie das vorherige Objekt per Spread und überschreiben die geänderten Felder. Verschachtelte Objekte benötigen ebenfalls einen eigenen Spread.

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

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

set mit einem neuen Wert

Wenn Sie den Zustand vollständig ersetzen, ist set() mit einem neuen Objekt automatisch unveränderlich, da Sie eine neue Referenz bereitstellen.

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

Warum computed davon abhängt

Da berechnete Lesemodelle von der Referenz des Signals abhängen, stellen unveränderliche Aktualisierungen sicher, dass sie neu berechnet werden. Eine Mutation, die dieselbe Array-Referenz beibehält, kann Summen und Filter unbemerkt veralten lassen.

Muster für Hilfsfunktionen

Lagern Sie häufige Umwandlungen in kleine reine Hilfsfunktionen aus, damit die Methoden des Stores lesbar und konsistent bleiben.

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

Vorsicht bei tiefer Verschachtelung

Tief verschachtelter Zustand erfordert viele Spread-Operationen. Wenn Aktualisierungen umständlich werden, glätten Sie die Zustandsstruktur oder teilen Sie sie auf mehrere Signale auf, sodass jede Aktualisierung nur einen kleinen Teil betrifft.

Unveränderlichkeit erleichtert das Debugging

Da jedes Update eine neue Referenz erzeugt, können Sie Snapshots im Zeitverlauf vergleichen, den vorherigen und den nächsten Zustand protokollieren und Änderungen nachvollziehen, ohne sich Gedanken über versteckte Änderungen direkt am bestehenden Objekt machen zu müssen.

Kurze Überprüfung

Testen Sie Ihr Verständnis von unveränderlichen Signal-Updates.

Zusammenfassung

Sie haben Muster für unveränderliche Updates kennengelernt: Spread-Syntax für Arrays und Objekte, map/filter zum Bearbeiten und Entfernen, neue Referenzen mit set und den Grund, warum Referenzgleichheit für eine korrekte Reaktivität Unveränderlichkeit unverzichtbar macht.

Häufig gestellte Fragen

Ist die Lektion „Zustand unveränderlich aktualisieren“ kostenlos?

Ja — der vollständige Text von „Zustand unveränderlich aktualisieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Zustand unveränderlich aktualisieren“?

Unveränderliche Aktualisierungen auf Signalzustände anwenden Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Zustand unveränderlich aktualisieren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy