Što su akcije i reduceri, i zašto reduceri moraju biti čisti?

Question

IT Interview Practice · Accepted Answer

**Akcija** je obični objekt koji opisuje *što se dogodilo* ; **reducer** je čista funkcija koja prima trenutno stanje i akciju te vraća *sljedeće* stanje. Zajedno implementiraju predvidive prijelaze stanja.

## Akcije — opisujte događaje

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

Akcije ne *rade* ništa — to su deklarativni opisi događaja. Imenovanje ih u prošlom vremenu ("dodano", "prebacivanje") odražava da bilježe što se dogodilo.

## Reduceri — izračunajte sljedeće stanje

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

Potpis reducera je `(state, action) => newState`. Mora vratiti **novo** stanje objekta/niza (neizmijenjivo), nikada ne mutira ulaz.

## Zašto reduceri MORAJU biti čisti

Čista funkcija: (1) vraća isti izlaz za isti ulaz, i (2) nema **nuspojava**. Reduceri moraju slijediti oba pravila:

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

Čistota omogućava značajne reduxove karakteristike:

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

Nuspojave (API pozivi, logiranje, slučajnost) pripadaju **middleware** (thunks/sagas) ili efektima — nikada u reducerima.

## Zašto je to važno

Model akcija/reducera je srce Redux-stilskog upravljanja stanjem i razlog zašto je toliko moguće ispravljati greške i testirati.

Zahtjev čistote nije proizvoljan: to je *ono što čini* vremensko-putno ispravljanje grešaka, ponavljanje akcija, i trivijalno jedinično testiranje moguće, i zato što nuspojave moraju biti negdje drugdje.

Ovaj čist-funkcija-vođeni, neizmijenjeni uzorak ažuriranja ponavlja se na svim Redux, NgRx, useReducer, i dalje — razumijevanje toga (i disciplina čuvanja reducera čistima) je temelj za predvidivo stanje.

Akcije — opisujte događaje

Reduceri — izračunajte sljedeće stanje

Zašto reduceri MORAJU biti čisti

Zašto je to važno

Povezana pitanja