State machine là gì và khi nào chúng hữu ích?

Question

Accepted Answer

Một **state machine** (máy trạng thái) mô hình hóa một hệ thống thành một tập hữu hạn các **state** cộng với các **transition** (chuyển đổi) được cho phép giữa chúng. Thay vì tung hứng các boolean flag độc lập, bạn định nghĩa chính xác những state nào tồn tại và những transition nào hợp lệ — khiến các state bất khả thi không thể biểu diễn được.

## Vấn đề: mớ boolean hỗn độn

```js
// ❌ nhiều boolean → 2^n tổ hợp, nhiều cái không hợp lệ
const [isLoading, setLoading] = useState(false);
const [isError, setError] = useState(false);
const [isSuccess, setSuccess] = useState(false);
// { isLoading: true, isError: true, isSuccess: true } — vô nghĩa, nhưng CÓ THỂ
```

Với các flag độc lập, không gì ngăn các tổ hợp mâu thuẫn, và bạn phải tự giữ chúng nhất quán ở mỗi transition — một nam châm thu hút bug.

## Mô hình state-machine

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

Chỉ các transition đã định nghĩa được cho phép; bạn không thể ở hai state cùng lúc.
```

```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; // chỉ các transition hợp lệ xảy ra
}
```

Một biến `state` duy nhất giữ state hiện tại; một `event` kích hoạt một transition *đã định nghĩa*. Các transition bất hợp lệ (vd. SUCCESS khi đang idle) đơn giản là không thể xảy ra — các state bất khả thi đã biến mất theo thiết kế.

## Công cụ thực tế: XState

```js
// các thư viện như XState chính thức hóa điều này với guard, action, state lồng/song song
const toggleMachine = createMachine({
  initial: "inactive",
  states: {
    inactive: { on: { TOGGLE: "active" } },
    active:   { on: { TOGGLE: "inactive" } },
  },
});
```

## Khi nào state machine hữu ích

```text
✓ Các luồng phức tạp với nhiều state: checkout, form/wizard nhiều bước, media player
✓ Các luồng xác thực (logged out → logging in → logged in → refreshing)
✓ Bất cứ nơi nào các tổ hợp state không hợp lệ gây bug
✗ Quá mức cần thiết cho các toggle đơn giản hoặc state tầm thường
```

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

State machine mang lại sự nghiêm ngặt cho logic state phức tạp bằng cách khiến các **state không hợp lệ trở nên bất khả thi** và các **transition trở nên tường minh** — thay thế các tổ hợp boolean dễ vỡ bằng một mô hình rõ ràng, đầy đủ.

Chúng đặc biệt giá trị cho các luồng phức tạp (wizard, thanh toán, auth, media) nơi mớ boolean hỗn độn dẫn đến các bug tinh vi, khó tái tạo.

Ngay cả một cách không chính thức (một status enum), ý tưởng này cải thiện state async; một cách chính thức (XState) nó cung cấp logic có thể trực quan hóa, test được, bền vững.

Biết khi nào nên dùng chúng là một dấu hiệu của thiết kế state chín chắn.