MobX'in reaktif durum modeli Redux'tan nasıl farklı?

Question

Accepted Answer

**MobX**, Redux'tan temel olarak farklı bir yaklaşım benimser: açık eylemler ve değişmez güncellemeler yerine, **şeffaf reaktivite** kullanır — gözlenebilir durumu doğrudan mutasyona uğratırsınız ve MobX otomatik olarak bağımlılıkları takip eder ve buna bağlı olan her şeyi güncelleştirir (Vue'nin reaktivitesi veya Signals'a benzer). ## MobX — değişebilir gözlenebilirler, otomatik takip ```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(() => ( )); ``` Durumu doğrudan mutasyona uğratırsınız (`this.count++`) ve MobX otomatik olarak yalnızca `count`'u okuyan `observer` bileşenlerini yeniden render eder. Reducer, action, dispatch veya manuel immutability yok. ## Felsefedeki temel fark ```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 bağımlılıkları nasıl takip eder ```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. ``` Bu, Vue'nin reaktivitesinin ve Signals'ın arkasındaki track-on-read/trigger-on-write fikri ile aynıdır. ## Ödünleşimler ```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 ``` ## Neden önemli MobX, durum yönetiminin **reaktif/değişebilir** okulunu temsil eder — Redux'un **açık/değişmez** yaklaşımının tersidir. Kontrastı anlamak, önemli bir tasarım eksenini açıklığa kavuşturur: açık-ve-öngörülebilir (Redux: her eylemi izleyin, ancak daha fazla boilerplate) ve otomatik-ve-özlü (MobX: serbestçe mutasyona uğratın, daha az kod, ancak daha az açık). Aynı reaktif ilke Vue ve Signals'ın arkasında yatmaktadır, bu nedenle MobX'i anlamak tüm bir durum araçları ailesini aydınlatır ve belirli bir proje için tahmin edilebilirlik ve ergonomi arasında seçim yapmanıza yardımcı olur.