Mô hình state reactive của MobX khác Redux như thế nào?

Question

Accepted Answer

**MobX** áp dụng một cách tiếp cận khác biệt về cơ bản so với Redux: thay vì action tường minh và cập nhật immutable, nó dùng **reactivity trong suốt (transparent reactivity)** — bạn mutate observable state trực tiếp, và MobX tự động theo dõi dependency và cập nhật bất cứ thứ gì phụ thuộc vào nó (tương tự reactivity của Vue hay Signals). ## MobX — observable có thể mutate, theo dõi tự động ```js import { makeAutoObservable } from "mobx"; import { observer } from "mobx-react-lite"; class CounterStore { count = 0; constructor() { makeAutoObservable(this); } // làm các field thành observable increment() { this.count++; } // ✅ mutate TRỰC TIẾP — không action, không immutability get double() { return this.count * 2; } // computed — tự suy ra & cache } const store = new CounterStore(); // các component observer tự re-render khi observable chúng đọc thay đổi const Counter = observer(() => ( )); ``` Bạn mutate state trực tiếp (`this.count++`), và MobX tự động re-render chỉ các component `observer` đã đọc `count`. Không reducer, action, dispatch, hay immutability thủ công. ## Khác biệt cốt lõi về triết lý ```text Redux MobX Cập nhật immutable (trả về state mới) mutable (đổi tại chỗ) Cơ chế action + reducer tường minh theo dõi reactive trong suốt Luồng dữ liệu một chiều nghiêm ngặt, dễ đoán phản ứng dependency tự động Boilerplate nhiều hơn ít hơn Giá trị derived selector (thủ công) computed (tự động, cache) Mô hình tư duy functional / tường minh OOP / reactive / ngầm định ``` ## Cách MobX theo dõi dependency ```text MobX bọc observable trong proxy. Khi một component observer render, MobX ghi lại những observable nào nó ĐỌC. Khi bất kỳ cái nào thay đổi, MobX chạy lại đúng component đó — mịn, tự động, không cần selector. ``` Đây là cùng ý tưởng track-on-read/trigger-on-write đằng sau reactivity của Vue và Signals. ## Đánh đổi ```text Ưu của MobX: ít boilerplate, reactivity tự động, giá trị derived dễ, thân thiện OOP Nhược của MobX: "phép thuật" có thể kém tường minh/dễ truy vết hơn các action được log của Redux; luồng dựa trên mutation khó time-travel debug hơn reducer thuần ``` ## Tại sao điều này quan trọng MobX đại diện cho trường phái **reactive/mutable** của state management — đối lập với cách tiếp cận **tường minh/immutable** của Redux. Hiểu sự tương phản làm rõ một trục thiết kế then chốt: tường-minh-và-dễ-đoán (Redux: truy vết mọi action, nhưng nhiều boilerplate) so với tự-động-và-ngắn-gọn (MobX: mutate tự do, ít code, nhưng kém tường minh). Cùng nguyên tắc reactive làm nền cho Vue và Signals, nên nắm MobX soi sáng cả một họ công cụ state và giúp bạn chọn giữa tính dễ đoán và tính tiện dụng cho một dự án nhất định.