Angular Academy · Les

State onveranderlijk bijwerken

Pas onveranderlijke updates toe op signalstate

Les 3 van 413 stappen

State onveranderlijk bijwerken is een gratis Angular Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Angular Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Angular Academy bevat in totaal 4 lessen.

Waarom onveranderlijkheid

Signalen detecteren veranderingen op basis van referenties. Als je een array of object rechtstreeks wijzigt, blijft de referentie hetzelfde en worden afhankelijke computed()-signalen mogelijk niet opnieuw berekend. Maak altijd een nieuwe referentie.

De valkuil van mutaties

Als je elementen toevoegt aan een bestaande array, wijzig je deze zonder de referentie te veranderen. Vermijd dit.

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

Spread voor arrays

Maak een nieuwe array met de spreadoperator, zodat de referentie verandert en gebruikers opnieuw worden bijgewerkt.

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

Items verwijderen

Gebruik filter(), dat een volledig nieuwe array retourneert en het origineel ongemoeid laat.

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

Eén item bijwerken

Gebruik map() om een nieuwe array te retourneren en verspreid het overeenkomende object in een nieuwe kopie, zodat ook de interne referentie verandert.

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

Spread voor objecten

Gebruik voor objectstatus het vorige object met de spreadoperator en overschrijf de gewijzigde velden. Geneste objecten hebben ook hun eigen spread nodig.

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

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

set met een nieuwe waarde

Wanneer je de status volledig vervangt, is set() met een nieuw object van nature onveranderlijk, omdat je een nieuwe referentie opgeeft.

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

Waarom computed hiervan afhangt

Omdat berekende leesmodellen afhankelijk zijn van de referentie van het signaal, zorgen onveranderlijke updates ervoor dat ze opnieuw worden berekend. Een mutatie die dezelfde arrayreferentie behoudt, kan totalen en filters ongemerkt verouderd laten.

Patronen voor hulpfuncties

Haal kleine zuivere hulpfuncties voor veelgebruikte transformaties uit de code, zodat methoden van de opslag leesbaar en consistent blijven.

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

Let op met diepe nesten

Diep geneste status betekent veel spreadbewerkingen. Als updates lastig worden, maak je de statusstructuur vlakker of splits je deze op in meerdere signalen, zodat elke update maar een klein deel raakt.

Onveranderlijkheid helpt bij debuggen

Omdat elke update een nieuwe referentie oplevert, kun je momentopnamen in de tijd vergelijken, de vorige en volgende status loggen en wijzigingen begrijpen zonder je zorgen te maken over verborgen bewerkingen ter plaatse.

Korte controle

Test je begrip van onveranderlijke signaalupdates.

Beantwoord dit in de interactieve les

Samenvatting

Je hebt patronen voor onveranderlijke updates geleerd: spread voor arrays en objecten, map/filter voor bewerkingen en verwijderingen, nieuwe referenties via set, en waarom referentiegelijkheid onveranderlijkheid essentieel maakt voor correcte reactiviteit.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 38
Lessen: 144

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “State onveranderlijk bijwerken” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “State onveranderlijk bijwerken”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Angular Academy bevat in totaal 4 lessen.

Wat leer ik in “State onveranderlijk bijwerken”?

Pas onveranderlijke updates toe op signalstate Je oefent met Angular Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Angular Academy te beginnen?

Ervaring vooraf is niet nodig. Angular Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “State onveranderlijk bijwerken”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Angular Academy?

Ja. Elke les over Angular Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Angular Academy