Afledt tilstand og selectors med typer
Skriv typede selectorfunktioner til beregnet tilstand
Afledt tilstand og selectors med typer er en gratis TypeScript Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i TypeScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. TypeScript Academy-kurset indeholder 4 lektioner i alt.
Hvad er afledt tilstand?
Afledt tilstand er tilstand, der beregnes ud fra anden tilstand — for eksempel ved at filtrere en liste eller lægge værdier sammen. Selektorer indkapsler denne beregning og kan memoiseres for bedre ydeevne.
// Raw state
const users: User[] = [/* ... */];
// Derived state: active users only
const activeUsers = users.filter(u => u.isActive);Typeangivne selektorfunktioner
Skriv selektorfunktioner med eksplicitte returtyper for at dokumentere, hvad de beregner, og forhindre, at typerne gradvist afviger.
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: Memoiserede selektorer
Biblioteket reselect (som bruges af RTK) opretter memoiserede selektorer, der kun beregner resultatet igen, når deres inddata ændres.
import { createSelector } from "reselect";
const selectActiveUsers = createSelector(
(state: RootState) => state.users,
(users) => users.filter((u) => u.isActive)
);
// Return type inferred: User[]Typeangivne parameteriserede selektorer
Fabriksselektorer modtager argumenter og returnerer en selektor — nyttigt til opslag pr. 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 skal du give store-hooket en typeangiven selektor for kun at læse den nødvendige del af tilstanden.
const activeUsers = useUserStore((s) => s.users.filter(u => u.isActive));
// Inferred type: User[]Afledt tilstand i React med useMemo
Til lokal afledt tilstand skal du bruge useMemo med korrekte typeangivelser til at memoise beregnede værdier i komponenter.
const sortedUsers = useMemo(
(): User[] => [...users].sort((a, b) => a.name.localeCompare(b.name)),
[users]
);Sammensætning af selektorer
Opbyg komplekse selektorer ved at sammensætte enklere selektorer — reselect håndterer memoising på tværs af kæden.
const selectActiveUserNames = createSelector(
selectActiveUsers,
(users) => users.map((u) => u.name)
); // string[]Typesikker Zustand med immer til afledte opdateringer
Når du beregner afledte opdateringer, skal du bruge immer til at ændre en tilstandskladde — TypeScript sikrer, at du kun berører gyldige egenskaber.
const useStore = create<AppStore>()(immer((set) => ({
users: [],
activeCount: 0,
setUsers: (users) =>
set((draft) => {
draft.users = users;
draft.activeCount = users.filter((u) => u.isActive).length;
}),
})));Udledning af selektorens returtype
TypeScript udleder returtyper fra selektorer, men eksplicitte typeangivelser gør koden lettere at læse og forhindrer utilsigtet any fra dynamiske udtryk.
// 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
);Test af selektorer
Selektorer er rene funktioner — test dem ved at give dem en mocktilstand og kontrollere resultatets type og værdi.
test("selectActiveUsers", () => {
const state = { users: [{ id: "1", isActive: true }, { id: "2", isActive: false }] } as RootState;
expect(selectActiveUsers(state)).toHaveLength(1);
});Opsummering: Typeangivne selektorer
Typeangivne selektorer: skriv funktioner, der modtager RootState, med eksplicitte returtyper, brug createSelector til memoising, sammensæt selektorer til komplekse afledninger, og test dem som rene funktioner.
Hurtigt tjek
Hvilken fordel giver createSelector i forhold til en almindelig selektorfunktion?
Det har du lært
Typeangivne selektorer modtager RootState og returnerer præcist typeangivne afledte værdier. Brug createSelector til memoising, sammensæt selektorer til kompleks logik, og skriv fabrikselektorer til parameteriserede opslag af entiteter.
Lær TypeScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 101
- Lektioner
- 352
Ofte stillede spørgsmål
Er lektionen “Afledt tilstand og selectors med typer” gratis?
Ja — hele teksten til “Afledt tilstand og selectors med typer” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af TypeScript Academy-kurset, skal du opgradere til CoddyKit PRO. TypeScript Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Afledt tilstand og selectors med typer”?
Skriv typede selectorfunktioner til beregnet tilstand Du øver dig i TypeScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på TypeScript Academy?
Der kræves ingen tidligere erfaring. TypeScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “Afledt tilstand og selectors med typer”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne TypeScript Academy-lektion?
Ja. Alle TypeScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Typning af Redux Toolkit-slices og thunks
- Mønstre for typning af Zustand-stores
- XState: Typede tilstandsmaskiner
- Afledt tilstand og selectors med typer