แบบจำลองสถานะ Reactive ของ MobX แตกต่างจาก Redux อย่างไร

Question

Accepted Answer

**MobX** ใช้วิธีการพื้นฐานที่แตกต่างจาก Redux: แทนที่จะใช้ actions ที่ชัดเจนและการอัปเดตที่ไม่เปลี่ยนแปลง มันใช้ **reactive transparency** — คุณเปลี่ยนแปลงสถานะ observable โดยตรง และ MobX จะติดตามการขึ้นต่อกันโดยอัตโนมัติและอัปเดตทุกอย่างที่ขึ้นต่อกันกับมัน (คล้ายกับ reactivity ของ Vue หรือ Signals) ## MobX — observables ที่เปลี่ยนแปลงได้, การติดตามโดยอัตโนมัติ ```js import { makeAutoObservable } from "mobx"; import { observer } from "mobx-react-lite"; class CounterStore { count = 0; constructor() { makeAutoObservable(this); } // make fields observable increment() { this.count++; } // ✅ DIRECT mutation — no actions, no immutability get double() { return this.count * 2; } // computed — auto-derived & cached } const store = new CounterStore(); // observer components auto-re-render when the observables they read change const Counter = observer(() => ( )); ``` คุณเปลี่ยนแปลงสถานะโดยตรง (`this.count++`), และ MobX จะ re-render โดยอัตโนมัติเฉพาะคอมโพเนนต์ `observer` ที่อ่าน `count` เท่านั้น ไม่มี reducers, actions, dispatch หรือการไม่เปลี่ยนแปลงด้วยตนเอง ## ความแตกต่างหลักในปรัชญา ```text Redux MobX Updates immutable (return new state) mutable (change in place) Mechanism explicit actions + reducers transparent reactive tracking Data flow strict one-way, predictable automatic dependency reactions Boilerplate more less Derived values selectors (manual) computed (automatic, cached) Mental model functional / explicit OOP / reactive / implicit ``` ## วิธี MobX ติดตามการขึ้นต่อกัน ```text MobX wraps observables in proxies. When an observer component renders, MobX records which observables it READ. When any of those change, MobX re-runs exactly that component — fine-grained, automatic, no selectors needed. ``` นี่คือแนวคิด track-on-read/trigger-on-write เดียวกันที่อยู่เบื้องหลัง reactivity ของ Vue และ Signals ## Trade-offs ```text MobX pros: less boilerplate, automatic reactivity, easy derived values, OOP-friendly MobX cons: "magic" can be less explicit/traceable than Redux's logged actions; mutation-based flow is harder to time-travel debug than pure reducers ``` ## ทำไมมันจึงสำคัญ MobX แสดงถึง **reactive/mutable** school ของการจัดการสถานะ — สิ่งที่ตรงกันข้ามกับวิธี **explicit/immutable** ของ Redux การทำความเข้าใจความเป็นตรงกันข้ามนี้ชี้แจงแกนออกแบบที่สำคัญ: explicit-and-predictable (Redux: ติดตามทุกการกระทำ แต่มี boilerplate มากขึ้น) กับ automatic-and-concise (MobX: เปลี่ยนแปลงอย่างอิสระ, โค้ดน้อยลง แต่ชัดเจนน้อยลง) หลักการ reactive เดียวกันนี้อยู่เบื้องหลัง Vue และ Signals ดังนั้นการทำความเข้าใจ MobX จึงให้แสงสว่างเกี่ยวกับเครื่องมือจัดการสถานะเพียงครอบครัวเดียวและช่วยให้คุณเลือกระหว่างความคาดเดาได้และ ergonomics สำหรับโครงการที่กำหนด