Melyek az akciók és a redukátorok, és miért kell a redukátoroknak tisztának lenniük?

Question

Accepted Answer

Az **akció** egy sima objektum, amely leírja, *mi történt* ; a **redukátor** egy tiszta függvény, amely az aktuális állapotot és egy akciót vesz fel, és a *következő* állapotot adja vissza. Együtt megjósolható állapotátmeneteket valósítanak meg.

## Akciók — írja le az eseményeket

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

Az akciók nem *csinálnak* semmit — az események deklaratív leírásai. Az őket múlt időben ("hozzáadva", "átváltva") elnevezése azt tükrözi, hogy rögzítik, mi történt.

## Redukátorok — számítsd ki a következő állapotot

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

A redukátor aláírása `(state, action) => newState`. Egy **új** állapotobjektumot/tömböt kell visszaadnia (megváltoztathatatlanul), soha nem mutálhat a bemenetet.

## Miért KELL a redukátoroknak tisztának lennie

Egy tiszta függvény: (1) ugyanazt a kimenetet adja vissza az azonos bemenethez, és (2) nincs **mellékhatása**. A redukátoroknak mindkét szabályt be kell tartaniuk:

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

A tisztaság lehetővé teszi a Redux jellegzetes funkcióit:

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

A mellékhatások (API-hívások, naplózás, véletlenszerűség) a **middleware** (thunks/sagas) vagy az effektekhez tartoznak — soha nem a redukátorokhoz.

## Miért fontos ez

Az akció/redukátor modell a Redux-stílusú állapotkezelés szíve, és az oka annak, hogy olyan hibakereshetőek és tesztelhetőek.

A tisztaság követelménye nem önkényes: ez az, ami lehetővé teszi az idő-utazási hibakeresést, akciók ismétlését és triviális egység-tesztelést, és ez az oka annak, hogy a mellékhatások máshol kell hogy éljenek.

Ez a tiszta-függvény-vezérelt, megváltoztathatatlan frissítési minta ismétlődik a Redux, NgRx, useReducer és azon túl — ezének megértése (és a redukátorok tisztán tartásának fegyelme) alapvető a megjósolható állapothoz.