Stan pochodny i selektory z typami
Pisz typowane funkcje selektorów dla obliczanego stanu.
Stan pochodny i selektory z typami to bezpłatna lekcja TypeScript 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 TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 4 lekcji w sumie.
Czym jest stan pochodny
Stan pochodny to stan obliczany na podstawie innego stanu — na przykład przefiltrowana lista lub suma wartości. Selektory enkapsulują te obliczenia i mogą być zapamiętywane w celu poprawy wydajności.
// Raw state
const users: User[] = [/* ... */];
// Derived state: active users only
const activeUsers = users.filter(u => u.isActive);Typowane funkcje selektorów
Pisz funkcje selektorów z jawnymi typami zwracanymi, aby opisać, co obliczają, i zapobiec rozjechaniu się typów.
import type { RootState } from "./store";
const selectActiveUsers = (state: RootState): User[] =>
state.users.filter((u) => u.isActive);
const selectUserCount = (state: RootState): number =>
state.users.length;reselect: zapamiętywane selektory
Biblioteka reselect (używana przez RTK) tworzy zapamiętywane selektory, które ponownie obliczają wynik tylko wtedy, gdy zmienią się ich dane wejściowe.
import { createSelector } from "reselect";
const selectActiveUsers = createSelector(
(state: RootState) => state.users,
(users) => users.filter((u) => u.isActive)
);
// Return type inferred: User[]Typowane selektory parametryzowane
Selektory fabrykujące przyjmują argumenty i zwracają selektor — są przydatne do wyszukiwania poszczególnych encji.
const selectUserById = (id: string) =>
createSelector(
(state: RootState) => state.users,
(users) => users.find((u) => u.id === id) ?? null
);
// Usage: const user = useAppSelector(selectUserById("123"));Selektory Zustand
W Zustand przekaż typowany selektor do hooka store'a, aby odczytywać tylko potrzebny fragment.
const activeUsers = useUserStore((s) => s.users.filter(u => u.isActive));
// Inferred type: User[]Stan pochodny w React z useMemo
W przypadku lokalnego stanu pochodnego użyj useMemo z odpowiednimi adnotacjami typów, aby zapamiętywać obliczane wartości w komponentach.
const sortedUsers = useMemo(
(): User[] => [...users].sort((a, b) => a.name.localeCompare(b.name)),
[users]
);Komponowanie selektorów
Twórz złożone selektory, komponując prostsze — reselect obsługuje zapamiętywanie wyników w całym łańcuchu.
const selectActiveUserNames = createSelector(
selectActiveUsers,
(users) => users.map((u) => u.name)
); // string[]Bezpieczny typowo Zustand z immer do aktualizacji pochodnych
Podczas obliczania aktualizacji pochodnych użyj immer do modyfikowania stanu roboczego — TypeScript zapewni, że zmieniane są tylko prawidłowe właściwości.
const useStore = create<AppStore>()(immer((set) => ({
users: [],
activeCount: 0,
setUsers: (users) =>
set((draft) => {
draft.users = users;
draft.activeCount = users.filter((u) => u.isActive).length;
}),
})));Wnioskowanie typu zwracanego przez selektor
TypeScript wnioskuje typy zwracane na podstawie selektorów, ale jawne adnotacje poprawiają czytelność i zapobiegają przypadkowemu użyciu any w wyrażeniach dynamicznych.
// Inferred — may widen to any for complex expressions
const selectTotals = createSelector(
(s: RootState) => s.cart.items,
(items) => items.reduce((sum, i) => sum + i.price, 0) // inferred: number
);Testowanie selektorów
Selektory są funkcjami czystymi — testuj je, przekazując mockowany stan i sprawdzając typ oraz wartość wyniku.
test("selectActiveUsers", () => {
const state = { users: [{ id: "1", isActive: true }, { id: "2", isActive: false }] } as RootState;
expect(selectActiveUsers(state)).toHaveLength(1);
});Podsumowanie: typowane selektory
Typowane selektory: pisz funkcje przyjmujące RootState z jawnymi typami zwracanymi, używaj createSelector do zapamiętywania wyników, komponuj selektory na potrzeby złożonych obliczeń i testuj je jako funkcje czyste.
Szybkie sprawdzenie
Jaką przewagę zapewnia createSelector nad zwykłą funkcją selektora?
Czego się Państwo nauczyli
Typowane selektory przyjmują RootState i zwracają precyzyjnie typowane wartości pochodne. Używaj createSelector do zapamiętywania wyników, komponuj selektory na potrzeby złożonej logiki i twórz selektory fabrykujące do parametryzowanego wyszukiwania encji.
Ucz się TypeScript dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 101
- Lekcje
- 352
Często zadawane pytania
Czy lekcja „Stan pochodny i selektory z typami” jest bezpłatna?
Tak — pełny tekst „Stan pochodny i selektory z typami” 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 TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Stan pochodny i selektory z typami”?
Pisz typowane funkcje selektorów dla obliczanego stanu. Ćwiczysz TypeScript 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ąć TypeScript Academy?
Nie wymagamy żadnego doświadczenia. TypeScript 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 „Stan pochodny i selektory z typami”?
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 TypeScript Academy?
Tak. Każda lekcja TypeScript 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
- Typowanie slice’ów i thunków Redux Toolkit
- Wzorce typowania store’ów Zustand
- XState: typowane maszyny stanów
- Stan pochodny i selektory z typami