Middleware trong Redux là gì và thunk hoạt động ra sao?

Question

Accepted Answer

**Middleware** nằm giữa việc dispatch một action và việc action đến reducer, cho phép bạn chặn (intercept) các action để xử lý **side effect** (gọi API async, logging) — điều mà reducer không thể làm vì chúng phải giữ tính thuần. **Thunk** là middleware phổ biến nhất, cho phép logic async.

## Middleware nằm ở đâu

```text
dispatch(action) → [ middleware 1 → middleware 2 → ... ] → reducer → store
                     (có thể kiểm tra, sửa, trì hoãn, hoặc chặn action; làm side effect)
```

Middleware bọc (wrap) `dispatch`, nên mọi action đi qua nó trước khi đến reducer. Đây là nơi được chỉ định cho các side effect mà reducer cấm.

## Vấn đề mà thunk giải quyết

```js
// reducer thuần → không làm được điều này. Action thuần chỉ là object → cũng không.
async function loadUsers() {
  const users = await fetch("/api/users").then(r => r.json()); // một SIDE EFFECT
  // ...cần dispatch kết quả vào store
}
```

Bạn cần một nơi để làm việc async (fetch) rồi dispatch kết quả. Thunk middleware cho phép dispatch một **hàm** thay vì một object thuần.

## Một thunk — một hàm nhận dispatch

```js
// một "thunk" là một hàm (dispatch, getState) => { ... } làm việc async
function fetchUsers() {
  return async (dispatch, getState) => {
    dispatch({ type: "users/loading" });           // 1. báo hiệu loading
    try {
      const users = await api.getUsers();           // 2. side effect async
      dispatch({ type: "users/loaded", payload: users }); // 3. dispatch kết quả
    } catch (err) {
      dispatch({ type: "users/error", payload: err.message }); // 4. xử lý lỗi
    }
  };
}

// thunk middleware thấy một HÀM được dispatch và gọi nó với dispatch/getState
store.dispatch(fetchUsers());
```

Thunk thực hiện việc async và dispatch các action thuần (`loading`/`loaded`/`error`) ở mỗi giai đoạn — giữ reducer thuần trong khi side effect sống trong thunk.

## Các dùng middleware khác & lựa chọn thay thế

```text
✓ Log mọi action, analytics, báo cáo crash
✓ Redux Toolkit bao gồm thunk mặc định + createAsyncThunk để ít boilerplate hơn
Lựa chọn thay thế cho luồng async phức tạp: redux-saga (generator), redux-observable (RxJS)
```

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

Middleware là cách Redux xử lý mọi thứ reducer không thể — đặc biệt là **side effect async** — trong khi vẫn giữ tính thuần khiến reducer dễ đoán và dễ test.

Thunk là cách tiêu chuẩn, dễ tiếp cận để làm async (fetch dữ liệu, dispatch action loading/success/error).

Hiểu pipeline middleware và pattern thunk là thiết yếu với các app Redux thực tế, vì gần như mọi app đều cần load dữ liệu; `createAsyncThunk` của RTK được xây dựng trên chính điều này.