Hvad er actions og reducers, og hvorfor skal reducers være rene?

Question

Accepted Answer

En **action** er et simpelt objekt, der beskriver *hvad der skete*; en **reducer** er en ren funktion, der tager den aktuelle tilstand og en action og returnerer den *næste* tilstand. Sammen implementerer de forudsigelige tilstandsovergange.

## 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* ikke noget — de er deklarative beskrivelser af hændelser. At navngive dem som datotidsfakta ("tilføjet", "slået til/fra") afspejler, at de registrerer, hvad der skete.

## Reducers — beregner næste tilstand

```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 er `(state, action) => newState`. Den skal returnere et **nyt** tilstandsobjekt/array (uforanderligt), aldrig mutere inputtet.

## Hvorfor reducers SKAL være rene

En ren funktion: (1) returnerer det samme output for det samme input, og (2) har **ingen bivirkninger**. Reducers skal følge begge regler:

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

Renhed muliggø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
```

Bivirkninger (API-kald, logging, tilfældighed) hører hjemme i **middleware** (thunks/sagas) eller effects — aldrig i reducers.

## Hvorfor det betyder noget

Action/reducer-modellen er hjerte af Redux-stilet tilstandsstyring og grunden til, at det er så debuggable og testbart.

Renhedskravet er ikke vilkårligt: det er *hvad der gør* time-travel debugging, action replay og triviel enhedstestning muligt, og det er derfor bivirkninger skal leve andetsteds.

Dette rene-funktion-drevne, uforandelige opdateringsmønster gentages på tværs af Redux, NgRx, useReducer og videre — at forstå det (og disciplinen at holde reducers rene) er grundlæggende for forudsigelig tilstand.