Abgeleiteter State und Selektoren mit Typen
Schreiben Sie typisierte Selektor-Funktionen für berechnete Zustände.
Abgeleiteter State und Selektoren mit Typen ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist abgeleiteter State?
Abgeleiteter State wird aus anderem State berechnet – etwa beim Filtern einer Liste oder beim Addieren von Werten. Selector kapseln diese Berechnung und können für eine bessere Leistung memoisiert werden.
// Raw state
const users: User[] = [/* ... */];
// Derived state: active users only
const activeUsers = users.filter(u => u.isActive);Typisierte Selector-Funktionen
Schreiben Sie Selector-Funktionen mit expliziten Rückgabetypen, um zu dokumentieren, was sie berechnen, und eine Abweichung der Typen zu verhindern.
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: Memoisierte Selector
Die Bibliothek reselect (die von RTK verwendet wird) erstellt memoisierten Selector, die nur neu berechnet werden, wenn sich ihre Eingaben ändern.
import { createSelector } from "reselect";
const selectActiveUsers = createSelector(
(state: RootState) => state.users,
(users) => users.filter((u) => u.isActive)
);
// Return type inferred: User[]Typisierte parametrisierte Selector
Factory-Selector akzeptieren Argumente und geben einen Selector zurück – das ist nützlich für die Suche nach einzelnen Entitäten.
const selectUserById = (id: string) =>
createSelector(
(state: RootState) => state.users,
(users) => users.find((u) => u.id === id) ?? null
);
// Usage: const user = useAppSelector(selectUserById("123"));Zustand-Selector
Übergeben Sie Zustand einen typisierten Selector an den Store-Hook, um nur den benötigten State-Ausschnitt zu lesen.
const activeUsers = useUserStore((s) => s.users.filter(u => u.isActive));
// Inferred type: User[]Abgeleiteter State in React mit useMemo
Verwenden Sie für lokal abgeleiteten State useMemo mit geeigneten Typannotationen, um berechnete Werte in Komponenten zu memoisierten.
const sortedUsers = useMemo(
(): User[] => [...users].sort((a, b) => a.name.localeCompare(b.name)),
[users]
);Selector zusammensetzen
Erstellen Sie komplexe Selector, indem Sie einfachere Selector zusammensetzen – reselect übernimmt die Memoisierung entlang der gesamten Kette.
const selectActiveUserNames = createSelector(
selectActiveUsers,
(users) => users.map((u) => u.name)
); // string[]Typsicheres Zustand mit immer für abgeleitete Aktualisierungen
Verwenden Sie bei der Berechnung abgeleiteter Aktualisierungen immer, um einen Draft-State zu verändern – TypeScript stellt sicher, dass nur gültige Eigenschaften geändert werden.
const useStore = create<AppStore>()(immer((set) => ({
users: [],
activeCount: 0,
setUsers: (users) =>
set((draft) => {
draft.users = users;
draft.activeCount = users.filter((u) => u.isActive).length;
}),
})));Ableitung des Selector-Rückgabetyps
TypeScript leitet Rückgabetypen aus Selectors ab. Explizite Typannotationen verbessern jedoch die Lesbarkeit und verhindern, dass dynamische Ausdrücke versehentlich zu any führen.
// 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
);Selector testen
Selector sind reine Funktionen – testen Sie sie, indem Sie einen Mock-State übergeben und Typ sowie Wert der Ausgabe überprüfen.
test("selectActiveUsers", () => {
const state = { users: [{ id: "1", isActive: true }, { id: "2", isActive: false }] } as RootState;
expect(selectActiveUsers(state)).toHaveLength(1);
});Zusammenfassung: Typisierte Selector
Typisierte Selector: Schreiben Sie Funktionen, die RootState annehmen und explizite Rückgabetypen verwenden, nutzen Sie createSelector für die Memoisierung, setzen Sie Selector für komplexe Ableitungen zusammen und testen Sie sie als reine Funktionen.
Kurzer Check
Welchen Vorteil bietet createSelector gegenüber einer einfachen Selector-Funktion?
Das haben Sie gelernt
Typisierte Selector nehmen RootState entgegen und geben präzise typisierte abgeleitete Werte zurück. Verwenden Sie createSelector für die Memoisierung, setzen Sie Selector für komplexe Logik zusammen und schreiben Sie Factory-Selector für parametrisierte Suchen nach Entitäten.
Häufig gestellte Fragen
Ist die Lektion „Abgeleiteter State und Selektoren mit Typen“ kostenlos?
Ja — der vollständige Text von „Abgeleiteter State und Selektoren mit Typen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Abgeleiteter State und Selektoren mit Typen“?
Schreiben Sie typisierte Selektor-Funktionen für berechnete Zustände. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um TypeScript Academy zu starten?
Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Abgeleiteter State und Selektoren mit Typen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?
Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Redux-Toolkit-Slices und Thunks typisieren
- Muster zur Typisierung von Zustand-Stores
- XState: typisierte Zustandsautomaten
- Abgeleiteter State und Selektoren mit Typen