Avledet tilstand og selektorer med typer
Skriv typede selektorfunksjoner for beregnet tilstand.
Avledet tilstand og selektorer med typer er en gratis leksjon i TypeScript Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i TypeScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i TypeScript Academy inneholder totalt 4 leksjoner.
Hva er avledet tilstand?
Avledet tilstand er tilstand som beregnes fra annen tilstand, for eksempel ved å filtrere en liste eller summere verdier. Selektorer kapsler inn denne beregningen og kan memoiseres for bedre ytelse.
// Raw state
const users: User[] = [/* ... */];
// Derived state: active users only
const activeUsers = users.filter(u => u.isActive);Typede selektorfunksjoner
Skriv selektorfunksjoner med eksplisitte returtyper for å dokumentere hva de beregner og hindre at typene gradvis blir feil.
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: Memoiserte selektorer
reselect-biblioteket (som brukes av RTK) oppretter memoiserte selektorer som bare beregner resultatet på nytt når inndataene endres.
import { createSelector } from "reselect";
const selectActiveUsers = createSelector(
(state: RootState) => state.users,
(users) => users.filter((u) => u.isActive)
);
// Return type inferred: User[]Typede parametriserte selektorer
Selektor-fabrikker tar imot argumenter og returnerer en selektor – nyttig for oppslag per entitet.
const selectUserById = (id: string) =>
createSelector(
(state: RootState) => state.users,
(users) => users.find((u) => u.id === id) ?? null
);
// Usage: const user = useAppSelector(selectUserById("123"));Zustand-selektorer
I Zustand sender du en typet selektor til store-hooken for å lese bare den nødvendige delen av tilstanden.
const activeUsers = useUserStore((s) => s.users.filter(u => u.isActive));
// Inferred type: User[]Avledet tilstand i React med useMemo
For lokal avledet tilstand kan du bruke useMemo med riktige typeangivelser for å memoiserer beregnede verdier i komponenter.
const sortedUsers = useMemo(
(): User[] => [...users].sort((a, b) => a.name.localeCompare(b.name)),
[users]
);Kombinere selektorer
Bygg komplekse selektorer ved å kombinere enklere selektorer – reselect håndterer memoisereringen gjennom hele kjeden.
const selectActiveUserNames = createSelector(
selectActiveUsers,
(users) => users.map((u) => u.name)
); // string[]Typesikker Zustand med immer for avledede oppdateringer
Når du beregner avledede oppdateringer, kan du bruke immer til å endre en draft-tilstand – TypeScript sikrer at bare gyldige egenskaper endres.
const useStore = create<AppStore>()(immer((set) => ({
users: [],
activeCount: 0,
setUsers: (users) =>
set((draft) => {
draft.users = users;
draft.activeCount = users.filter((u) => u.isActive).length;
}),
})));Inferens av selektorens returtype
TypeScript utleder returtyper fra selektorer, men eksplisitte typeangivelser gir bedre lesbarhet og hindrer at dynamiske uttrykk utilsiktet får typen any.
// 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
);Teste selektorer
Selektorer er rene funksjoner – test dem ved å sende inn en mock-tilstand og kontrollere resultatets type og verdi.
test("selectActiveUsers", () => {
const state = { users: [{ id: "1", isActive: true }, { id: "2", isActive: false }] } as RootState;
expect(selectActiveUsers(state)).toHaveLength(1);
});Oppsummering: Typede selektorer
Typede selektorer: skriv funksjoner som tar imot RootState med eksplisitte returtyper, bruk createSelector til memoiserering, kombiner selektorer for komplekse avledninger, og test dem som rene funksjoner.
Hurtigsjekk
Hvilken fordel gir createSelector sammenlignet med en vanlig selektorfunksjon?
Dette har du lært
Typede selektorer tar imot RootState og returnerer nøyaktig typede avledede verdier. Bruk createSelector til memoiserering, kombiner selektorer for kompleks logikk, og skriv fabrikkselektorer for parametriserte oppslag av entiteter.
Lær deg TypeScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 101
- Leksjoner
- 352
Ofte stilte spørsmål
Er leksjonen «Avledet tilstand og selektorer med typer» gratis?
Ja – hele teksten i «Avledet tilstand og selektorer med typer» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av TypeScript Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i TypeScript Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Avledet tilstand og selektorer med typer»?
Skriv typede selektorfunksjoner for beregnet tilstand. Du øver på TypeScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med TypeScript Academy?
Ingen tidligere erfaring er nødvendig. TypeScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Avledet tilstand og selektorer med typer»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne TypeScript Academy-leksjonen?
Ja. Alle TypeScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Angi typer for Redux Toolkit-slices og thunks
- Mønstre for typing av Zustand-store
- XState: typede tilstandsmaskiner
- Avledet tilstand og selektorer med typer