Τι είναι actions και reducers, και γιατί πρέπει οι reducers να είναι καθαρές;

Question

Accepted Answer

Μια **action** είναι ένα απλό αντικείμενο που περιγράφει *τι συνέβη*. ένας **reducer** είναι μια καθαρή συνάρτηση που παίρνει την τρέχουσα κατάσταση και μια ενέργεια και επιστρέφει την *επόμενη* κατάσταση. Μαζί υλοποιούν προβλέψιμες μεταβάσεις κατάστασης.

## Actions — περιγράφουν γεγονότα

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

Oι Actions δεν *κάνουν* τίποτα — είναι δηλωτικές περιγραφές γεγονότων. Η ονοματοδοσία τους ως γεγονότα του παρελθόντος ("προστέθηκε", "εναλλαγή") αντανακλά ότι καταγράφουν τι συνέβη.

## Reducers — υπολογίζουν την επόμενη κατάσταση

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

Η υπογραφή ενός reducer είναι `(state, action) => newState`. Πρέπει να επιστρέψει ένα **νέο** αντικείμενο/πίνακα κατάστασης (αμετάβλητο), ποτέ να μην μεταλλάσσει την είσοδο.

## Γιατί οι reducers ΠΡΕΠΕΙ να είναι καθαρές

Μια καθαρή συνάρτηση: (1) επιστρέφει την ίδια έξοδο για την ίδια είσοδο και (2) δεν έχει **παρενέργειες**. Οι reducers πρέπει να ακολουθούν και τους δύο κανόνες:

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

Η καθαρότητα ενεργοποιεί τα χαρακτηριστικά της υπογραφής Redux:

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

Oι παρενέργειες (κλήσεις API, καταγραφή, τυχαιότητα) ανήκουν σε **middleware** (thunks/sagas) ή effects — ποτέ σε reducers.

## Γιατί έχει σημασία

Το μοντέλο action/reducer είναι η καρδιά της διαχείρισης κατάστασης στυλ Redux και ο λόγος για τον οποίο είναι τόσο εύκολο να αποσφαλματωθεί και να δοκιμαστεί.

Η απαίτηση καθαρότητας δεν είναι αυθαίρετη: είναι *αυτό που κάνει* δυνατό το debugging χρονικής ταξιδιού, την επανάληψη ενεργειών και τις τετριμμένες δοκιμές μονάδας, και είναι γιατί οι παρενέργειες πρέπει να ζουν αλλού.

Αυτό το μοτίβο που οδηγείται από καθαρές συναρτήσεις και αμετάβλητη ενημέρωση επαναλαμβάνεται σε Redux, NgRx, useReducer και πέρα — η κατανόησή του (και η πειθαρχία της διατήρησης της καθαρότητας των reducers) είναι θεμελιώδης για προβλέψιμη κατάσταση.