สเตตแมชีนคืออะไร และเมื่อไรที่มันช่วยได้

Question

Accepted Answer

**สเตตแมชีน** จำลองระบบเป็นชุดของ **สเตต** ที่จำกัด พร้อมกับ **ทรานซิชัน** ที่อนุญาตระหว่างพวกมัน แทนที่จะต่อสู้กับแฟล็กบูลีนที่เป็นอิสระ คุณสามารถกำหนดสเตตที่มีอยู่และทรานซิชันใดที่ถูกต้องได้ — ทำให้สเตตที่เป็นไปไม่ได้ไม่สามารถแสดงออกมาได้

## ปัญหา: boolean soup

```js
// ❌ multiple booleans → 2^n combinations, many of them invalid
const [isLoading, setLoading] = useState(false);
const [isError, setError] = useState(false);
const [isSuccess, setSuccess] = useState(false);
// { isLoading: true, isError: true, isSuccess: true } — nonsense, but POSSIBLE
```

ด้วยแฟล็กอิสระ ไม่มีอะไรหยุดการรวมกันที่ขัดแย้ง และคุณต้องรักษาความสอดคล้องของมันด้วยตนเองในทรานซิชันแต่ละครั้ง — แม่เหล็กของบัก

## รูปแบบสเตตแมชีน

```text
States:      idle → loading → success
                       ↓
                     error → (retry) → loading

Only defined transitions are allowed; you can't be in two states at once.
```

```js
const machine = {
  idle:    { FETCH: "loading" },
  loading: { SUCCESS: "success", ERROR: "error" },
  success: { FETCH: "loading" },
  error:   { RETRY: "loading" },
};
function transition(current, event) {
  return machine[current][event] ?? current; // only legal transitions happen
}
```

ตัวแปร `state` เพียงตัวเดียวเก็บสเตตปัจจุบัน; `event` เรียกใช้ทรานซิชัน *ที่กำหนดไว้* สเตตที่ผิดกฎหมาย (เช่น SUCCESS ขณะที่ว่างเปล่า) เพียงแค่ไม่สามารถเกิดขึ้นได้ — สเตตที่เป็นไปไม่ได้หายไปตามการออกแบบ

## เครื่องมือในโลกแห่งความเป็นจริง: XState

```js
// libraries like XState formalize this with guards, actions, nested/parallel states
const toggleMachine = createMachine({
  initial: "inactive",
  states: {
    inactive: { on: { TOGGLE: "active" } },
    active:   { on: { TOGGLE: "inactive" } },
  },
});
```

## เมื่อใดที่สเตตแมชีนช่วยได้

```text
✓ Complex flows with many states: checkout, multi-step forms/wizards, media players
✓ Authentication flows (logged out → logging in → logged in → refreshing)
✓ Anything where invalid state combinations cause bugs
✗ Overkill for simple toggles or trivial state
```

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

สเตตแมชีนนำความเข้มงวดไปยังตรรกะสเตตฟูลที่ซับซ้อนโดยทำให้ **สเตตที่ไม่ถูกต้องเป็นไปไม่ได้** และ **ทรานซิชันที่ชัดเจน** — แทนที่การรวมบูลีนที่เปราะบางด้วยโมเดลที่ชัดเจนและครบถ้วน

มันมีค่ามากโดยเฉพาะอย่างยิ่งสำหรับการไหลที่ซับซ้อน (ตัวช่วยสร้าง การชำระเงิน การรับรองความถูกต้อง สื่อ) โดยที่ boolean soup นำไปสู่บักที่ลึกลับและยากต่อการทำซ้ำ

แม้ว่าจะไม่เป็นทางการ (`status` enum) ความคิดเห็นก็ยังปรับปรุงสเตตแบบ async ได้; ในทางการ (XState) มันให้ตรรกะที่สามารถมองเห็นได้ ทดสอบได้ และแข็งแรง

การรู้ว่าเมื่อไหร่ต้องใช้มัน คือเครื่องหมายของการออกแบบสเตตที่มีความสุก