Action và reducer là gì, và tại sao reducer phải thuần (pure)?

Question

Accepted Answer

Một **action** là một object thuần mô tả *điều gì đã xảy ra*; một **reducer** là một hàm thuần nhận state hiện tại và một action rồi trả về state *tiếp theo*. Cùng nhau, chúng triển khai các chuyển đổi state dễ đoán.

## Action — mô tả các sự kiện

```js
// chỉ là dữ liệu: một `type` (bắt buộc) + payload tùy ý
{ type: "todos/added", payload: { id: 1, text: "Learn Redux" } }
{ type: "todos/toggled", payload: 1 }
```

Action không *làm* gì cả — chúng là các mô tả mang tính khai báo (declarative) về sự kiện. Đặt tên chúng ở thì quá khứ ("added", "toggled") phản ánh rằng chúng ghi lại điều đã xảy ra.

## Reducer — tính ra state tiếp theo

```js
function todosReducer(state = [], action) {
  switch (action.type) {
    case "todos/added":
      return [...state, action.payload];              // array mới
    case "todos/toggled":
      return state.map(t =>                             // array mới, object mới cho cái thay đổi
        t.id === action.payload ? { ...t, done: !t.done } : t
      );
    default:
      return state;                                     // action không xác định → giữ nguyên
  }
}
```

Chữ ký của một reducer là `(state, action) => newState`. Nó phải trả về một object/array state **mới** (immutably), không bao giờ mutate đầu vào.

## Tại sao reducer PHẢI thuần

Một hàm thuần: (1) trả về cùng output cho cùng input, và (2) **không có side effect**. Reducer phải tuân thủ cả hai quy tắc:

```js
// ❌ KHÔNG thuần — phá vỡ mọi thứ
function badReducer(state, action) {
  state.value++;              // ❌ mutate đầu vào (phá change detection, time-travel)
  fetch("/api/log");          // ❌ side effect (không xác định, không test được)
  return { value: Math.random() }; // ❌ output không xác định
}
```

Tính thuần cho phép các tính năng đặc trưng của Redux:

```text
✓ Dễ đoán       — cùng state + action LUÔN cho cùng kết quả
✓ Time-travel / replay — bạn có thể chạy lại action để tái tạo bất kỳ state nào
✓ Dễ test       — chỉ cần gọi reducer(state, action) và assert; không cần mock
✓ Change detection — trả về reference mới cho phép UI phát hiện thay đổi
```

Side effect (gọi API, logging, randomness) thuộc về **middleware** (thunk/saga) hoặc effect — không bao giờ trong reducer.

## Tại sao điều này quan trọng

Mô hình action/reducer là trái tim của state management kiểu Redux và là lý do nó dễ debug và dễ test đến vậy.

Yêu cầu về tính thuần không phải tùy tiện: nó *chính là cái* khiến time-travel debugging, replay action, và unit test tầm thường trở nên khả thi, và đó là lý do side effect phải sống ở nơi khác.

Pattern cập nhật immutable, dựa trên hàm thuần này lặp lại ở Redux, NgRx, useReducer, và hơn nữa — hiểu nó (và kỷ luật giữ reducer thuần) là nền tảng của state dễ đoán.