Middleware ใน Redux คืออะไร และ Thunks ทำงานอย่างไร

Question

Accepted Answer

**Middleware** นั่งอยู่ระหว่างการ dispatch action และ action ถึง reducer ทำให้คุณสามารถ intercept actions เพื่อจัดการ **side effects** (async API calls, logging) — สิ่งที่ reducers ไม่สามารถทำได้เพราะต้องคงความบริสุทธิ์ **Thunks** เป็น middleware ที่พบเห็นได้บ่อยที่สุด ช่วยให้ logic แบบ async

## Middleware อยู่ที่ไหน

```text
dispatch(action) → [ middleware 1 → middleware 2 → ... ] → reducer → store
                     (can inspect, modify, delay, or stop actions; do side effects)
```

Middleware ห่อหุ้ม `dispatch` ดังนั้นทุก action ผ่านมันก่อนที่จะถึง reducers นี่คือสถานที่ที่กำหนดไว้สำหรับ side effects ที่ reducers ห้าม

## ปัญหาที่ Thunks แก้ไข

```js
// reducers are pure → can't do this. Plain actions are just objects → can't either.
async function loadUsers() {
  const users = await fetch("/api/users").then(r => r.json()); // a SIDE EFFECT
  // ...need to dispatch the result into the store
}
```

คุณต้องการสถานที่สำหรับทำ async work (fetch) แล้ว dispatch ผลลัพธ์ Thunk middleware ให้คุณ dispatch **function** แทนที่จะเป็น plain object

## Thunk — function ที่ได้รับ dispatch

```js
// a "thunk" is a function (dispatch, getState) => { ... } doing async work
function fetchUsers() {
  return async (dispatch, getState) => {
    dispatch({ type: "users/loading" });           // 1. signal loading
    try {
      const users = await api.getUsers();           // 2. async side effect
      dispatch({ type: "users/loaded", payload: users }); // 3. dispatch the result
    } catch (err) {
      dispatch({ type: "users/error", payload: err.message }); // 4. handle errors
    }
  };
}

// thunk middleware sees a FUNCTION was dispatched and calls it with dispatch/getState
store.dispatch(fetchUsers());
```

Thunk ทำ async work และ dispatch plain actions (`loading`/`loaded`/`error`) ในแต่ละขั้นตอน — รักษา reducers ให้บริสุทธิ์ในขณะที่ side effect อยู่ใน thunk

## การใช้ middleware อื่นๆ และทางเลือก

```text
✓ Logging every action, analytics, crash reporting
✓ Redux Toolkit includes thunk by default + createAsyncThunk for less boilerplate
Alternatives for complex async flows: redux-saga (generators), redux-observable (RxJS)
```

## ทำไมจึงมีความสำคัญ

Middleware คือวิธีที่ Redux จัดการทุกสิ่งที่ reducers ไม่สามารถทำได้ — โดยเฉพาะ **async side effects** — พร้อมกับรักษาความบริสุทธิ์ที่ทำให้ reducers คาดการณ์ได้และทดสอบได้

Thunks เป็นวิธี standard และเข้าใจง่ายในการทำ async (ดึงข้อมูล dispatch loading/success/error actions)

การเข้าใจ middleware pipeline และ thunk pattern เป็นสิ่งจำเป็นสำหรับแอป Redux จริง เพราะเกือบทั้งหมดต้องโหลดข้อมูล RTK ของ `createAsyncThunk` นั่นสร้างขึ้นโดยอิงจากสิ่งนี้พอดี