Angular Academy · Lektion

Uppdatera tillstånd oföränderligt

Tillämpa oföränderliga uppdateringar på signalens tillstånd.

Lektion 3 av 413 steg

Uppdatera tillstånd oföränderligt är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.

Varför oföränderlighet?

Signaler upptäcker ändringar genom referenser. Om ni ändrar en array eller ett objekt på plats förblir referensen densamma, och beroende computed()-signaler kanske inte beräknas om. Skapa alltid en ny referens.

Mutationsfällan

Om ni lägger till något i en befintlig array ändras den utan att referensen ändras. Undvik detta.

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

Spread för arrayer

Skapa en ny array med spread-operatorn så att referensen ändras och konsumenterna körs om.

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

Ta bort objekt

Använd filter(), som returnerar en helt ny array och lämnar originalet orört.

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

Uppdatera ett objekt

Använd map() för att returnera en ny array och sprid det matchande objektet till en ny kopia så att även den inre referensen ändras.

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

Spread för objekt

För objekttillstånd sprider ni det tidigare objektet och skriver över de fält som ändrats. Kapslade objekt behöver också spridas på motsvarande sätt.

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

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

set med ett nytt värde

När ni ersätter hela tillståndet är set() med ett nytt objekt naturligt oföränderligt, eftersom ni tillhandahåller en ny referens.

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

Varför computed är beroende av detta

Eftersom beräknade läsmodeller beror på signalens referens garanterar oföränderliga uppdateringar att de beräknas om. En ändring som behåller samma arrayreferens kan i tysthet lämna totalsummor och filter inaktuella.

Hjälpmönster

Extrahera små rena hjälpfunktioner för vanliga omvandlingar så att förrådets metoder förblir läsbara och konsekventa.

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

Var försiktig med djup nästning

Djupt nästlat tillstånd innebär många spread-operationer. Om uppdateringarna blir besvärliga kan ni platta ut tillståndets struktur eller dela upp den i flera signaler, så att varje uppdatering endast berör en liten del.

Oföränderlighet underlättar felsökning

Eftersom varje uppdatering skapar en ny referens kan du jämföra ögonblicksbilder över tid, logga föregående och nästa tillstånd samt resonera om ändringar utan att behöva oroa dig för dolda ändringar på plats.

Snabb kontroll

Testa dina kunskaper om oföränderliga signaluppdateringar.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Du har lärt dig mönster för oföränderliga uppdateringar: spread för arrayer och objekt, map/filter för redigeringar och borttagningar, nya referenser via set samt varför referenslikhet gör oföränderlighet nödvändig för korrekt reaktivitet.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Uppdatera tillstånd oföränderligt” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Uppdatera tillstånd oföränderligt”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Uppdatera tillstånd oföränderligt”?

Tillämpa oföränderliga uppdateringar på signalens tillstånd. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Uppdatera tillstånd oföränderligt”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy