Bagaimana model keadaan reaktif MobX berbeda dari Redux?

Question

Accepted Answer

**MobX** mengambil pendekatan yang secara fundamental berbeda dari Redux: alih-alih tindakan eksplisit dan pembaruan yang tak dapat diubah, ia menggunakan **reaktivitas transparan** — Anda memutasi keadaan yang dapat diamati secara langsung, dan MobX secara otomatis melacak dependensi dan memperbarui apa pun yang bergantung padanya (mirip dengan reaktivitas Vue atau Signals). ## MobX — observable yang dapat dimutasi, pelacakan otomatis ```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(() => ( )); ``` Anda memutasi keadaan secara langsung (`this.count++`), dan MobX secara otomatis hanya me-render ulang komponen `observer` yang membaca `count`. Tidak ada reducers, tindakan, dispatch, atau ketakubahan manual. ## Perbedaan filosofi inti ```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 ``` ## Bagaimana MobX melacak dependensi ```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. ``` Ini adalah ide pelacakan-saat-membaca/pemicu-saat-menulis yang sama di balik reaktivitas Vue dan Signals. ## Pertukaran ```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 ``` ## Mengapa ini penting MobX mewakili sekolah **reaktif/dapat dimutasi** dari manajemen keadaan — kebalikan dari pendekatan **eksplisit/tak dapat diubah** Redux. Memahami kontras menjelaskan sumbu desain utama: eksplisit-dan-dapat-diprediksi (Redux: lacak setiap tindakan, tetapi lebih banyak boilerplate) vs. otomatis-dan-ringkas (MobX: mutasi bebas, lebih sedikit kode, tetapi kurang eksplisit). Prinsip reaktif yang sama mendasari Vue dan Signals, jadi memahami MobX menerangi seluruh keluarga alat keadaan dan membantu Anda memilih antara prediktabilitas dan ergonomi untuk proyek tertentu.