Was sind State Machines und wann sind sie hilfreich?

Question

Accepted Answer

Eine **State Machine** modelliert ein System als endliche Menge von **Zuständen** plus die erlaubten **Übergänge** zwischen ihnen. Anstatt sich mit unabhängigen booleschen Flags herumzuschlagen, definieren Sie präzise, welche Zustände existieren und welche Übergänge zulässig sind — was unmögliche Zustände nicht darstellbar macht.

## Das Problem: boolean soup

```js
// ❌ multiple booleans → 2^n combinations, many of them invalid
const [isLoading, setLoading] = useState(false);
const [isError, setError] = useState(false);
const [isSuccess, setSuccess] = useState(false);
// { isLoading: true, isError: true, isSuccess: true } — nonsense, but POSSIBLE
```

Mit unabhängigen Flags hindert nichts widersprüchliche Kombinationen, und Sie müssen diese bei jedem Übergang manuell konsistent halten — eine Fehlerquelle.

## Das State-Machine-Modell

```text
States:      idle → loading → success
                       ↓
                     error → (retry) → loading

Only defined transitions are allowed; you can't be in two states at once.
```

```js
const machine = {
  idle:    { FETCH: "loading" },
  loading: { SUCCESS: "success", ERROR: "error" },
  success: { FETCH: "loading" },
  error:   { RETRY: "loading" },
};
function transition(current, event) {
  return machine[current][event] ?? current; // only legal transitions happen
}
```

Eine einzelne `state`-Variable hält den aktuellen Zustand; ein `event` löst einen *definierten* Übergang aus. Illegale Übergänge (z.B. SUCCESS im Leerlauf) können einfach nicht auftreten — die unmöglichen Zustände sind konstruktiv bedingt weg.

## Reale Werkzeuge: XState

```js
// libraries like XState formalize this with guards, actions, nested/parallel states
const toggleMachine = createMachine({
  initial: "inactive",
  states: {
    inactive: { on: { TOGGLE: "active" } },
    active:   { on: { TOGGLE: "inactive" } },
  },
});
```

## Wann State Machines helfen

```text
✓ Complex flows with many states: checkout, multi-step forms/wizards, media players
✓ Authentication flows (logged out → logging in → logged in → refreshing)
✓ Anything where invalid state combinations cause bugs
✗ Overkill for simple toggles or trivial state
```

## Warum es wichtig ist

State Machines bringen Stringenz in komplexe zustandsabhängige Logik, indem sie **ungültige Zustände unmöglich** und Übergänge **explizit** machen — wobei fragile Kombinationen von booleschen Werten durch ein klares, erschöpfendes Modell ersetzt werden.

Sie sind besonders wertvoll für komplexe Abläufe (Assistenten, Zahlungen, Authentifizierung, Medien), wo boolean soup zu subtilen, schwer reproduzierbaren Bugs führt.

Schon informell (`status`-Enum) verbessert die Idee asynchrone Zustände; formal (XState) bietet sie visualisierbare, testbare, robuste Logik.

Zu wissen, wann man zu ihnen greifen sollte, ist ein Zeichen reifen State-Designs.