Vad är tillståndsautomater och när hjälper de?

Question

Accepted Answer

En **tillståndsautomat** modellerar ett system som en ändlig mängd **tillstånd** plus tillåtna **övergångar** mellan dem. Istället för att hantera oberoende boolean-flaggor definierar du exakt vilka tillstånd som finns och vilka övergångar som är lagliga — vilket gör omöjliga tillstånd representerbara.

## Problemet: boolean-röra

```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
```

Med oberoende flaggor hindrar inget motsägelsefulla kombinationer, och du måste manuellt hålla dem konsistenta vid varje övergång — en buggmagnet.

## Tillståndsautomatmodellen

```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
}
```

En enda `state`-variabel håller det nuvarande tillståndet; en `event` utlöser en *definierad* övergång. Otillåtna övergångar (t.ex. SUCCESS medan inaktiv) kan helt enkelt inte inträffa — de omöjliga tillstånden är borta enligt designen.

## Verklig verktygsuppsättning: 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" } },
  },
});
```

## När tillståndsautomater hjälper

```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
```

## Varför det är viktigt

Tillståndsautomater för stringens till komplex tillståndslogik genom att göra **ogiltiga tillstånd omöjliga** och övergångar **explicita** — och ersätter sköraste kombinationer av boooleaner med en tydlig, uttömmande modell.

De är särskilt värdefulla för komplicerade flöden (guider, betalningar, autentisering, media) där boolean-röra leder till subtila, svårt återproducerbara buggar.

Även informellt (en `status`-enum) förbättrar idén asynkront tillstånd; formellt (XState) tillhandahåller det visualiserbar, testbar, robust logik.

Att veta när man ska använda dem är ett tecken på mogent tillståndsdesign.