Angular Academy · Lekcja

Niemutowalne aktualizowanie stanu

Stosować niemutowalne aktualizacje stanu sygnałów

Niemutowalne aktualizowanie stanu to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Dlaczego niezmienność

Sygnały wykrywają zmiany na podstawie referencji. Jeśli zmodyfikujesz tablicę lub obiekt w miejscu, referencja pozostanie taka sama i zależne sygnały computed() mogą nie zostać ponownie obliczone. Zawsze twórz nową referencję.

Pułapka mutowania

Dodanie elementu do istniejącej tablicy modyfikuje ją bez zmiany referencji. Należy tego unikać.

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

Spread dla tablic

Utwórz nową tablicę za pomocą operatora spread, aby zmienić referencję i ponownie uruchomić konsumentów.

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

Usuwanie elementów

Użyj filter(), który zwraca zupełnie nową tablicę i pozostawia oryginał bez zmian.

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

Aktualizowanie jednego elementu

Użyj map(), aby zwrócić nową tablicę, a dopasowany obiekt rozwiń do świeżej kopii, tak aby zmieniła się również wewnętrzna referencja.

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

Spread dla obiektów

W przypadku stanu będącego obiektem rozwiń poprzedni obiekt i nadpisz zmienione pola. Zagnieżdżone obiekty również wymagają własnego operatora spread.

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

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

set z nową wartością

Gdy całkowicie zastępujesz stan, użycie set() z nowym obiektem jest naturalnie niezmienne, ponieważ przekazujesz nową referencję.

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

Dlaczego computed tego wymaga

Ponieważ obliczane modele odczytu zależą od referencji sygnału, niezmienne aktualizacje gwarantują ich ponowne obliczenie. Mutacja zachowująca tę samą referencję tablicy może po cichu pozostawić sumy i filtry nieaktualne.

Wzorce pomocnicze

Wydzielaj małe, czyste funkcje pomocnicze do typowych przekształceń, aby metody magazynu były czytelne i spójne.

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

Uwaga na głębokie zagnieżdżenia

Głęboko zagnieżdżony stan oznacza konieczność używania wielu operatorów spread. Jeśli aktualizacje stają się uciążliwe, spłaszcz strukturę stanu lub podziel ją na wiele sygnałów, aby każda aktualizacja obejmowała niewielki fragment.

Niezmienność ułatwia debugowanie

Ponieważ każda aktualizacja tworzy nowe odwołanie, mogą Państwo porównywać migawki w czasie, rejestrować poprzedni i następny stan oraz analizować zmiany bez obaw o ukryte modyfikacje w miejscu.

Szybki test

Sprawdź swoją wiedzę na temat niezmiennych aktualizacji sygnałów.

Podsumowanie

Poznali Państwo wzorce niezmiennych aktualizacji: operator spread dla tablic i obiektów, map/filter do edycji i usuwania, nowe odwołania tworzone przez set oraz powód, dla którego równość odwołań jest niezbędna do poprawnej reaktywności.

Często zadawane pytania

Czy lekcja „Niemutowalne aktualizowanie stanu” jest bezpłatna?

Tak — pełny tekst „Niemutowalne aktualizowanie stanu” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Niemutowalne aktualizowanie stanu”?

Stosować niemutowalne aktualizacje stanu sygnałów Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Niemutowalne aktualizowanie stanu”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Angular Academy