Apa itu aksi dan reducer, dan mengapa reducer harus murni?

Question

Accepted Answer

**Aksi** adalah objek biasa yang mendeskripsikan *apa yang terjadi* ; **reducer** adalah fungsi murni yang mengambil status saat ini dan tindakan serta mengembalikan status *berikutnya* . Bersama-sama mereka menerapkan transisi status yang dapat diprediksi.

## Aksi — jelaskan peristiwa

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

Aksi tidak *melakukan* apa pun — mereka adalah deskripsi deklaratif peristiwa. Memberi nama mereka dalam bentuk lampau ("ditambahkan", "dialihkan") mencerminkan bahwa mereka mencatat apa yang terjadi.

## Reducer — hitung status berikutnya

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

Tanda tangan reducer adalah `(state, action) => newState`. Harus mengembalikan **objek/array status baru** (secara immutable), tidak pernah mutasi input.

## Mengapa reducer HARUS murni

Fungsi murni: (1) mengembalikan output yang sama untuk input yang sama, dan (2) tidak memiliki **efek samping** . Reducer harus mengikuti kedua aturan:

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

Kemurnian memungkinkan fitur tanda tangan 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
```

Efek samping (panggilan API, logging, keacakan) hidup di **middleware** (thunks/sagas) atau effects — tidak pernah di reducer.

## Mengapa ini penting

Model aksi/reducer adalah jantung manajemen status gaya Redux dan alasan mengapa sangat dapat di-debug dan dapat diuji.

Persyaratan kemurnian bukan sewenang-wenang: itulah yang membuat debugging perjalanan waktu, pemutaran ulang aksi, dan pengujian unit trivial mungkin terjadi, dan itulah mengapa efek samping harus hidup di tempat lain.

Pola pembaruan yang didorong fungsi murni dan immutable ini berulang di seluruh Redux, NgRx, useReducer, dan seterusnya — memahaminya (dan disiplin menjaga reducer murni) adalah fundamental untuk status yang dapat diprediksi.