0Pricing
TypeScript Academy · Lektion

Muster zur Typisierung von Zustand-Stores

Definieren Sie typisierte Zustand-Stores mit Interfaces und Actions.

Muster zur Typisierung von Zustand-Stores ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

Warum Zustand typisieren?

Zustand ist eine schlanke Bibliothek zur State-Verwaltung. Durch die korrekte TypeScript-Integration erhalten Sie typsicheren Zugriff auf den Store, typsichere Aktionen und Selector, ohne Boilerplate-Code.

import { create } from "zustand";

Einfacher typisierter Store

Definieren Sie das Store-Interface und übergeben Sie es als Generic an create.

interface CounterStore {
  count: number;
  increment: () => void;
  decrement: () => void;
}

const useCounter = create<CounterStore>((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
  decrement: () => set((s) => ({ count: s.count - 1 })),
}));

Store-State lesen

Verwenden Sie den Hook mit einem Selector, um bestimmte Ausschnitte des States zu lesen. TypeScript leitet den Rückgabetyp aus dem Selector ab.

function Counter() {
  const count = useCounter((s) => s.count);       // number
  const increment = useCounter((s) => s.increment); // () => void
  return <button onClick={increment}>{count}</button>;
}

State und Aktionen aufteilen

Ein gängiges Muster trennt State-Eigenschaften und Aktionsmethoden im Interface, um für eine klarere Struktur zu sorgen.

interface State { count: number; }
interface Actions { increment: () => void; reset: () => void; }
type CounterStore = State & Actions;

Asynchrone Aktionen in Zustand

Zustand unterstützt asynchrone Aktionen nativ – machen Sie die Aktionsfunktion innerhalb des Creators einfach asynchron.

interface UserStore {
  users: User[];
  fetchUsers: () => Promise<void>;
}

const useUserStore = create<UserStore>((set) => ({
  users: [],
  fetchUsers: async () => {
    const data = await api.getUsers();
    set({ users: data });
  },
}));

Typisierung der immer-Middleware

Verwenden Sie die immer-Middleware von Zustand für Updates im Stil veränderbarer Daten. Der Store-Typ wird dabei korrekt weitergegeben.

import { immer } from "zustand/middleware/immer";

const useStore = create<CounterStore>()(
  immer((set) => ({
    count: 0,
    increment: () => set((state) => { state.count++; }),
  }))
);

devtools-Middleware

Kombinieren Sie devtools mit korrekter Typisierung, um die Unterstützung für Redux DevTools zu aktivieren und die Typen intakt zu halten.

import { devtools } from "zustand/middleware";

const useStore = create<CounterStore>()(
  devtools(
    (set) => ({ count: 0, increment: () => set({ count: 1 }) }),
    { name: "CounterStore" }
  )
);

Typisierung eines persistenten Stores

Die persist-Middleware serialisiert den State in localStorage. Typisieren Sie sie korrekt mit dem Interface für den partiellen State.

import { persist } from "zustand/middleware";

const useStore = create<CounterStore>()(
  persist(
    (set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }),
    { name: "counter-storage" }
  )
);

Muster für typisierte Slices

Teilen Sie große Stores in typisierte Slices auf, die in einem einzigen create-Aufruf zusammengeführt werden.

type UserSlice = { users: User[]; setUsers: (u: User[]) => void; };
type UiSlice = { modal: boolean; openModal: () => void; };
type AppStore = UserSlice & UiSlice;

Außerhalb von React abonnieren

Greifen Sie außerhalb von React-Komponenten über die typisierte Store-API auf den State zu und abonnieren Sie Änderungen.

// Access current state outside React
const count = useCounter.getState().count;

// Subscribe to changes
useCounter.subscribe((state) => console.log(state.count));

Zusammenfassung: Zustand-Typisierung

Zustand-Typisierung: Definieren Sie ein Store-Interface, übergeben Sie es an create, verwenden Sie Selector für typisierte State-Abfragen und binden Sie Middleware (immer, devtools, persist) über das Curry-Pattern ein, damit die Typen korrekt weitergegeben werden.

Kurzer Check

Wie lesen Sie in einer Komponente einen bestimmten Teil des Zustand-States, ohne dass sich die Komponente bei unabhängigen Änderungen erneut rendert?

Das haben Sie gelernt

Zustand-Stores werden typisiert, indem ein Interface-Generic an create übergeben wird. Verwenden Sie Selector-Funktionen für effiziente, typsichere State-Abfragen. Kombinieren Sie Middleware wie immer, devtools und persist über Zustands Curry-Pattern, damit TypeScript die Typen korrekt ableiten kann.

Häufig gestellte Fragen

Ist die Lektion „Muster zur Typisierung von Zustand-Stores“ kostenlos?

Ja — der vollständige Text von „Muster zur Typisierung von Zustand-Stores“ 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 „Muster zur Typisierung von Zustand-Stores“?

Definieren Sie typisierte Zustand-Stores mit Interfaces und Actions. 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 2 von 4.

Wie lange dauert die Lektion „Muster zur Typisierung von Zustand-Stores“?

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

  1. Redux-Toolkit-Slices und Thunks typisieren
  2. Muster zur Typisierung von Zustand-Stores
  3. XState: typisierte Zustandsautomaten
  4. Abgeleiteter State und Selektoren mit Typen
← Zurück zu TypeScript Academy