كيف يختلف نموذج الحالة التفاعلية في MobX عن Redux؟

Question

Accepted Answer

يتخذ **MobX** نهجاً مختلفاً بشكل جوهري عن Redux: بدلاً من الإجراءات الصريحة والتحديثات غير القابلة للتغيير، يستخدم **التفاعلية الشفافة** — تقوم بتعديل حالة الملاحظة مباشرة، و MobX يتابع تلقائياً التبعيات ويحدث أي شيء يعتمد عليها (مشابه لتفاعلية Vue أو Signals). ## MobX — الملاحظات القابلة للتعديل، والتتبع التلقائي ```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 يعيد تقديم مكونات `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 وراء تفاعلية Vue و Signals. ## المقايضات ```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 مدرسة **التفاعلية/القابلة للتعديل** لإدارة الحالة — وهي عكس نهج Redux **الصريح/غير القابل للتغيير**. يوضح فهم التباين محور تصميم رئيسي: صريح-وقابل-للتنبؤ (Redux: تتبع كل إجراء، لكن مع المزيد من الكود النموذجي) مقابل تلقائي-وموجز (MobX: عدّل بحرية، كود أقل، لكن أقل صراحة). المبدأ التفاعلي نفسه يكمن وراء Vue و Signals، لذا فإن فهم MobX يوضح عائلة كاملة من أدوات الحالة ويساعدك على الاختيار بين القابلية للتنبؤ والسهولة لمشروع معين.