Mitä ovat actions ja reducers, ja miksi reducereiden on oltava puhtaita?

Question

Accepted Answer

**action** on yksinkertainen objekti, joka kuvaa *mitä tapahtui*; **reducer** on puhdas funktio, joka ottaa nykyisen tilan ja actionin ja palauttaa *seuraavan* tilan. Yhdessä ne toteuttavat ennustettavia tilansiirtymiä.

## Actions — kuvaavat tapahtumia

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

Actionit eivät *tee* mitään — ne ovat deklaratiivisia tapahtumien kuvauksia. Niiden nimeäminen menneessä aikamuodossa ("lisätty", "kytketty") heijastaa sitä, että ne kirjaavat mitä tapahtui.

## Reducers — laskevat seuraavan tilan

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

Reducerin allekirjoitus on `(state, action) => newState`. Sen on palautettava **uusi** tilaobjekti/array (muuttumatonna), ei koskaan muutettava syötettä.

## Miksi reducereiden on oltava puhtaita

Puhdas funktio: (1) palauttaa saman tuloksen samasta syötteestä ja (2) on **ilman sivuvaikutuksia**. Reducereiden on noudatettava molempia sääntöjä:

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

Puhtaus mahdollistaa Reduxin hallintomaineet:

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

Sivuvaikutukset (API-kutsut, kirjaus, satunnaisuus) kuuluvat **middleware**-ohjelmistoon (thunks/sagas) tai effects-ohjelmistoihin — ei koskaan reducereihin.

## Miksi sillä on merkitystä

action/reducer-malli on Redux-tyyppisen tilanhallinnan sydän ja syy, miksi se on niin helppo debugata ja testata.

Puhtausvaatimus ei ole mielivaltainen: se on *se, mikä tekee* aikamatkailuvälit-debuggauksen, actionien uusintamisen ja triviaaliyksiköiden testaamisen mahdollisiksi, ja se on syy, miksi sivuvaikutuksilla on oltava olemassaolo muualla.

Tämä puhtailla funktioilla ohjattu, muuttumaton päivitysmalli toistetaan Redux-, NgRx-, useReducer- ja sitä pidemmälle — sen ymmärtäminen (ja reducereiden puhtauden säilyttämisen kurinalaisuus) on perustavanlaatuista ennustettavalle tilalle.