Cum diferă modelul de stare reactivă al MobX de Redux?

Question

Accepted Answer

**MobX** adopță o abordare fundamental diferită de Redux: în loc de acțiuni explicite și actualizări imuabile, folosește **reactivitate transparentă** — muți starea observable direct, iar MobX urmărește automat dependențele și actualizează orice depinde de ea (similar cu reactivitatea Vue sau Signals). ## MobX — observables mutabile, urmărire automată ```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(() => ( )); ``` Muți starea direct (`this.count++`), iar MobX redă automat doar componentele `observer` care citesc `count`. Fără reducers, actions, dispatch sau imuabilitate manuală. ## Diferența fundamentală în filozofie ```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 ``` ## Cum urmărește MobX dependențele ```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. ``` Acesta este același concept track-on-read/trigger-on-write din spatele reactivității Vue și Signals. ## Compromisuri ```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 ``` ## De ce este important MobX reprezintă școala **reactivă/mutabilă** de management de stare — opusul abordării **explicite/imuabile** a Redux. Înțelegerea contrastului clarifică o axă de design fundamentală: explicit-și-previzibil (Redux: urmărește fiecare acțiune, dar mai mult boilerplate) versus automat-și-concis (MobX: mutează liber, mai puțin cod, dar mai puțin explicit). Același principiu reactiv stă la baza Vue și Signals, deci stăpânirea MobX iluminează o familie întreagă de instrumente de stare și te ajută să alegi între previzibilitate și ergonomie pentru un anumit proiect.