0Pricing
TypeScript Academy · Lektion

State und Reducer; Context-Typisierung

Verwalten Sie den Komponenten-State mit useState und useReducer und heben Sie ihn anschließend in einen typisierten Context mit einem sicheren eigenen Hook.

State und Reducer; Context-Typisierung ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 3. 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 3 Lektionen.

Einführung

Ziel: Beginnen Sie mit lokalem State (useState), wechseln Sie zu einem typisierten Reducer (useReducer) und heben Sie den State anschließend in einen typisierten Context mit einem sicheren Custom Hook.

  • Modellieren Sie State und Actions explizit.
  • Bevorzugen Sie Discriminated Unions.
  • Schützen Sie den Context-Zugriff.

Typisiertes useState

Versehen Sie den State mit einem konkreten Typ (z. B. number). Verwenden Sie die Updater-Form, um bei schnellen Aktualisierungen veraltete Closures zu vermeiden.

import React, { useState } from "react"

export default function Counter() {
  const [count, setCount] = useState<number>(0)

  const inc = () => setCount(c => c + 1)
  const dec = () => setCount(c => c - 1)

  return (
    <div style={{ display: "grid", gap: 8 }}>
      <div>Count: {count}</div>
      <div style={{ display: "flex", gap: 8 }}>
        <button onClick={inc}>+1</button>
        <button onClick={dec}>-1</button>
      </div>
    </div>
  )
}

Typisiertes useReducer

Modellieren Sie Action als Discriminated Union. Der switch bleibt vollständig; die Payloads sind je nach Zweig typisiert.

import React, { useReducer } from "react"

type State = { count: number }

type Action =
  | { type: "inc" }
  | { type: "add"; by: number }
  | { type: "reset" }

function reducer(s: State, a: Action): State {
  switch (a.type) {
    case "inc": return { count: s.count + 1 }
    case "add": return { count: s.count + a.by }
    case "reset": return { count: 0 }
  }
}

export default function App() {
  const [state, dispatch] = useReducer(reducer, { count: 0 })
  return (
    <div style={{ display: "grid", gap: 8 }}>
      <div>Count: {state.count}</div>
      <button onClick={() => dispatch({ type: "inc" })}>+1</button>
      <button onClick={() => dispatch({ type: "add", by: 5 })}>+5</button>
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
    </div>
  )
}

Context und Hook

Erstellen Sie Context<T | null> und stellen Sie anschließend useX bereit, das bei null einen Fehler auslöst. Die Consumer bleiben einfach und gut typisiert.

import React, { createContext, useContext, useReducer } from "react"

type State = { count: number }

type Action = { type: "inc" } | { type: "add"; by: number } | { type: "reset" }

function reducer(s: State, a: Action): State {
  switch (a.type) {
    case "inc": return { count: s.count + 1 }
    case "add": return { count: s.count + a.by }
    case "reset": return { count: 0 }
  }
}

type Ctx = { state: State; dispatch: React.Dispatch<Action> }

const CounterCtx = createContext<Ctx | null>(null)

export function useCounter() {
  const ctx = useContext(CounterCtx)
  if (!ctx) throw new Error("useCounter must be used within CounterProvider")
  return ctx
}

export function CounterProvider({ children }: { children: React.ReactNode }) {
  const [state, dispatch] = useReducer(reducer, { count: 0 })
  return <CounterCtx.Provider value={{ state, dispatch }}>{children}</CounterCtx.Provider>
}

export default function App() {
  return (
    <CounterProvider>
      <Inner />
    </CounterProvider>
  )
}

function Inner() {
  const { state, dispatch } = useCounter()
  return (
    <div style={{ display: "grid", gap: 8 }}>
      <div>Count: {state.count}</div>
      <button onClick={() => dispatch({ type: "inc" })}>+1</button>
    </div>
  )
}

Context- und Reducer-Muster

Teilen Sie das Lesen und Dispatching auf mehrere Komponenten auf. Der Provider umschließt die Children und stellt typisierten State sowie Dispatch bereit.

import React from "react"
import { CounterProvider, useCounter } from "./ctx"

function Controls() {
  const { dispatch } = useCounter()
  return (
    <div style={{ display: "flex", gap: 8 }}>
      <button onClick={() => dispatch({ type: "inc" })}>+1</button>
      <button onClick={() => dispatch({ type: "add", by: 10 })}>+10</button>
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
    </div>
  )
}

function View() {
  const { state } = useCounter()
  return <div>Count: {state.count}</div>
}

export default function App() {
  return (
    <CounterProvider>
      <div style={{ display: "grid", gap: 8 }}>
        <View />
        <Controls />
      </div>
    </CounterProvider>
  )
}

Best Practices

Best Practices:

  • Halten Sie den State minimal und leiten Sie den Rest daraus ab.
  • Bevorzugen Sie Discriminated Unions für Actions.
  • Schützen Sie den Context-Zugriff mit einem Custom Hook.

Prüfung der Context-Typisierung

Schnelltest: Wie typisieren Sie einen React Context sicher?

Zusammenfassung

Zusammenfassung: Beginnen Sie mit useState, modellieren Sie Zustandsübergänge mit useReducer und heben Sie gemeinsamen State in einen typisierten Context, der durch einen Custom Hook geschützt wird.

Häufig gestellte Fragen

Ist die Lektion „State und Reducer; Context-Typisierung“ kostenlos?

Ja — der vollständige Text von „State und Reducer; Context-Typisierung“ 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 3 Lektionen.

Was lerne ich in „State und Reducer; Context-Typisierung“?

Verwalten Sie den Komponenten-State mit useState und useReducer und heben Sie ihn anschließend in einen typisierten Context mit einem sicheren eigenen Hook. 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 3.

Wie lange dauert die Lektion „State und Reducer; Context-Typisierung“?

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. Props und children; Event-Handler; Refs
  2. State und Reducer; Context-Typisierung
  3. Komponenten-Generics – Einführung
← Zurück zu TypeScript Academy