Angular Academy · Lekcja

Encje i niestandardowe funkcje

Zarządzać kolekcjami za pomocą withEntities

Encje i niestandardowe funkcje to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 4 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.

Zarządzanie kolekcjami

Listy rekordów (zadań, użytkowników, produktów) są tak powszechne, że NgRx udostępnia withEntities do zarządzania nimi za pomocą znormalizowanego stanu i gotowych funkcji aktualizujących.

withEntities

withEntities przechowuje elementy pod kluczami identyfikatorów w obiekcie entityMap oraz w uporządkowanej tablicy ids, a także udostępnia obliczany sygnał entities zawierający listę.

import { withEntities } from '@ngrx/signals/entities';

export const TodoStore = signalStore(
  withEntities<Todo>()
);
// store.entities() -> Todo[]

Aktualizatory encji

Z użyciem patchState należy stosować pomocnicze aktualizatory: setAllEntities, addEntity, updateEntity, removeEntity. Zachowują one spójność mapy i kolejności identyfikatorów.

import { addEntity, removeEntity, updateEntity } from '@ngrx/signals/entities';

patchState(store, addEntity({ id: '1', title: 'A', done: false }));
patchState(store, updateEntity({ id: '1', changes: { done: true } }));
patchState(store, removeEntity('1'));

Ładowanie kolekcji

Po pobraniu danych należy zastąpić całą kolekcję za pomocą setAllEntities, które normalizuje tablicę do mapy i tablicy identyfikatorów.

import { setAllEntities } from '@ngrx/signals/entities';

load: rxMethod<void>(pipe(
  switchMap(() => api.getTodos()),
  tap(todos => patchState(store, setAllEntities(todos)))
))

Niestandardowy idKey

Jeśli identyfikator encji nie nazywa się id, należy przekazać selektor. Sklep będzie wtedy tworzyć klucze mapy na podstawie tego pola.

withEntities<User>(); // expects user.id
// custom key:
patchState(store, addEntity(user, { selectId: (u: User) => u.uuid }));

Wyprowadzanie danych z encji

Połącz withEntities z withComputed, aby tworzyć filtrowane lub zliczane modele odczytu na podstawie kolekcji.

withComputed(({ entities }) => ({
  remaining: computed(() => entities().filter(t => !t.done).length)
}))

Czym jest niestandardowa funkcja

Niestandardowa funkcja to wielokrotnego użytku pakiet stanu, wartości computed i metod, który można dodawać do wielu sklepów. Tworzy się ją za pomocą signalStoreFeature.

import { signalStoreFeature, withState } from '@ngrx/signals';

export function withLoading() {
  return signalStoreFeature(
    withState({ loading: false })
  );
}

Ponowne używanie funkcji

Niestandardową funkcję można dodawać do dowolnego sklepu tak samo jak wbudowaną. W ten sposób współdzieli się przekrojowe elementy, takie jak flagi ładowania czy paginacja.

export const TodoStore = signalStore(
  withLoading(),
  withEntities<Todo>()
);
// store.loading() now exists

Funkcje z metodami

Niestandardowa funkcja może zawierać withMethods, aby udostępniać wielokrotnego użytku zachowanie, na przykład pomocnicze funkcje setLoading.

export function withLoading() {
  return signalStoreFeature(
    withState({ loading: false }),
    withMethods((store) => ({
      setLoading(loading: boolean) { patchState(store, { loading }); }
    }))
  );
}

Komponowalność

Ponieważ funkcje są po prostu funkcjami zwracającymi deskryptory funkcji, można łączyć wiele elementów: withLoading(), withEntities() oraz stan specyficzny dla aplikacji — wszystko zostanie scalone w jeden sklep z pełnym typowaniem.

Funkcje generyczne

Proszę uogólniać funkcje, aby działały z różnymi typami encji. Parametry typów są przekazywane dalej, dzięki czemu kod korzystający z funkcji zachowuje pełne bezpieczeństwo typów.

export function withSelected<T>() {
  return signalStoreFeature(
    withState({ selected: null as T | null })
  );
}

Szybki test

Sprawdź swoją wiedzę o encjach i funkcjach.

Podsumowanie

Zarządzałeś kolekcjami za pomocą withEntities (znormalizowana mapa, pomocnicze funkcje aktualizujące, pochodne modele odczytu) oraz tworzyłeś wielokrotnego użytku, generyczne pakiety signalStoreFeature do współdzielenia stanu, wartości obliczanych i metod między magazynami.

Często zadawane pytania

Czy lekcja „Encje i niestandardowe funkcje” jest bezpłatna?

Tak — pełny tekst „Encje i niestandardowe funkcje” 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 „Encje i niestandardowe funkcje”?

Zarządzać kolekcjami za pomocą withEntities Ć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 4 z 4.

Ile czasu zajmuje lekcja „Encje i niestandardowe funkcje”?

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