MobX کا reactive state model Redux سے کس طرح مختلف ہے؟

Question

Accepted Answer

**MobX** Redux سے بنیادی طور پر مختلف نقطہ نظر اختیار کرتا ہے: واضح actions اور immutable updates کی بجائے، یہ **transparent reactivity** استعمال کرتا ہے — آپ observable state کو براہ راست mutate کرتے ہیں، اور MobX خود بخود dependencies کو track کرتا ہے اور جو کچھ بھی اس پر منحصر ہے اسے update کرتا ہے (Vue کی reactivity یا Signals کی طرح)۔ ## MobX — mutable observables، automatic tracking ```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(() => ( )); ``` آپ state کو براہ راست mutate کرتے ہیں (`this.count++`)، اور MobX خود بخود صرف ان `observer` components کو دوبارہ render کرتا ہے جو `count` کو پڑھتے ہیں۔ کوئی reducers، actions، dispatch، یا manual immutability نہیں۔ ## فلسفے میں بنیادی فرق ```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 کیسے dependencies کو track کرتا ہے ```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. ``` yہ Vue کی reactivity اور Signals کے پیچھے track-on-read/trigger-on-write کا یہی خیال ہے۔ ## 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 state management کے **reactive/mutable** اسکول کی نمائندگی کرتا ہے — Redux کے **explicit/immutable** نقطہ نظر کے برعکس۔ اس تضاد کو سمجھنا ایک اہم design axis کو واضح کرتا ہے: explicit-and-predictable (Redux: ہر action کو trace کریں، لیکن زیادہ boilerplate) بمقابلہ automatic-and-concise (MobX: آزادی سے mutate کریں، کم code، لیکن کم explicit)۔ yہی reactive principle Vue اور Signals کو بھی بنیاد فراہم کرتا ہے، اس لیے MobX کو سمجھنا state tools کے ایک پورے خاندان کو واضح کرتا ہے اور آپ کو کسی مخصوص project کے لیے predictability اور ergonomics کے درمیان انتخاب کرنے میں مدد دیتا ہے۔