Vad är actions och reducers, och varför måste reducers vara rena?

Question

Accepted Answer

En **action** är ett enkelt objekt som beskriver *vad som hände*; en **reducer** är en ren funktion som tar det aktuella tillståndet och en action och returnerar *nästa* tillstånd. Tillsammans implementerar de förutsägbara tillståndsövergångar.

## Actions — beskriver händelser

```js
// just data: a `type` (required) + any payload
{ type: "todos/added", payload: { id: 1, text: "Learn Redux" } }
{ type: "todos/toggled", payload: 1 }
```

Actions *gör* inte något — de är deklarativa beskrivningar av händelser. Att namnge dem i dåtid ("added", "toggled") återspeglar att de registrerar vad som hände.

## Reducers — beräknar nästa tillstånd

```js
function todosReducer(state = [], action) {
  switch (action.type) {
    case "todos/added":
      return [...state, action.payload];              // new array
    case "todos/toggled":
      return state.map(t =>                             // new array, new object for the changed one
        t.id === action.payload ? { ...t, done: !t.done } : t
      );
    default:
      return state;                                     // unknown action → unchanged
  }
}
```

En reducers signatur är `(state, action) => newState`. Den måste returnera ett **nytt** tillstånds objekt/array (oförändrat), aldrig mutera inmatningen.

## Varför reducers MÅSTE vara rena

En ren funktion: (1) returnerar samma utmatning för samma inmatning, och (2) har **inga bieffekter**. Reducers måste följa båda reglerna:

```js
// ❌ NOT pure — breaks everything
function badReducer(state, action) {
  state.value++;              // ❌ mutates input (breaks change detection, time-travel)
  fetch("/api/log");          // ❌ side effect (non-deterministic, untestable)
  return { value: Math.random() }; // ❌ non-deterministic output
}
```

Renhet möjliggör Reduxs signaturfunktioner:

```text
✓ Predictability   — same state + action ALWAYS gives the same result
✓ Time-travel / replay — you can re-run actions to reproduce any state
✓ Testability      — just call reducer(state, action) and assert; no mocks needed
✓ Change detection — returning new references lets the UI detect changes
```

Bieffekter (API-anrop, loggning, slumpmässighet) hör hemma i **middleware** (thunks/sagas) eller effects — aldrig i reducers.

## Varför det spelar roll

Action/reducer-modellen är hjärtat i Redux-stil tillståndshantering och orsaken till att det är så debugbar och testbar.

Renhetskravet är inte godtyckligt: det är *vad som gör* time-travel debugging, action replay och trivial unit testing möjligt, och det är varför bieffekter måste leva på annat håll.

Detta rena-funktion-drivna, oförändrat uppdateringsmönster återkommer i Redux, NgRx, useReducer och bortom — att förstå det (och disciplinen att hålla reducers rena) är grundläggande för förutsägbar tillstånd.