Hinweis 04-1: Zustände modellieren
Stufe 1 zuerst lesen, dann selbst probieren. Die nächste Stufe erst, wenn du nach zwei Versuchen feststeckst.
Stufe 1: Denkfrage
Das Panel kann gleichzeitig nur in einem Zustand sein: nichts passiert, lädt, Entwurf da,
leer, Fehler, nicht erlaubt. Was geht schief, wenn du dafür fünf einzelne useState<boolean>
anlegst und vergisst, einen zurückzusetzen?
Stufe 2: Teilbeispiel
type PanelState =
| { kind: "idle" }
| { kind: "loading" }
| { kind: "draft"; draft: string }
| { kind: "empty" }
| { kind: "unauthorized" }
| { kind: "error"; message: string };
const [state, setState] = useState<PanelState>({ kind: "idle" });
Im JSX dann: {state.kind === "draft" && <pre data-testid="draft-preview">{state.draft}</pre>}.
Stufe 3: Konkrete Erklärung
Ein Objekt mit kind heisst "discriminated union". TypeScript weiss innerhalb von
state.kind === "draft", dass state.draft existiert. Du kannst keinen widersprüchlichen
Zustand herstellen (laden und Fehler gleichzeitig), weil setState immer das ganze Objekt
ersetzt. Die Notizen gehören in einen zweiten, getrennten useState<string>, denn sie
müssen jeden Zustandswechsel überleben (Test C02-M4-03).