Kuo MobX reaktyvios būsenos modelis skiriasi nuo Redux?

Question

Accepted Answer

**MobX** naudoja iš esmės skirtingą metodą nei Redux: vietoj aiškių veiksmų ir nekintamų atnaujinimų, jis naudoja **skaidrią reaktyvumą** — tiesiogiai keičiate stebimą būseną, ir MobX automatiškai seka priklausomybes bei atnaujina visa, kas priklauso nuo jos (panašiai kaip Vue reaktyvumas ar Signals). ## MobX — keičiamos stebimos reikšmės, automatinis sekimas ```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(() => ( )); ``` Tiesiogiai keičiate būseną (`this.count++`), ir MobX automatiškai iš naujo atvaizduoja tik tuos `observer` komponentus, kurie nuskaito `count`. Jokių reduktorių, veiksmų, dispatch arankaitūnų ar rankinio nekintamumo. ## Pagrindiniai filosofiniai skirtumai ```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 ``` ## Kaip MobX seka priklausomybes ```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. ``` Tai ta pati track-on-read/trigger-on-write idėja, esanti Vue reaktyvumo ir Signals pagrindoje. ## Kompromisai ```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 ``` ## Kodėl tai svarbu MobX reprezentuoja **reaktyvus/keičiamas** būsenos valdymo mokyklą — priešingą Redux **aiškiam/nekintamam** metodui. Supratimas apie skirtumą paaiškina pagrindinę projektavimo ašį: aiški-ir-nuspėjama (Redux: sekite kiekvieną veiksmą, bet daugiau šablono kodo) prieš automatinę-ir-glaustą (MobX: keiskite laisvai, mažiau kodo, bet mažiau aiško). Tas pats reaktyvus principas yra Vue ir Signals pagrinde, todėl supratimas apie MobX nušviečia visą būsenos įrankių šeimą ir padeda pasirinkti tarp prognozuojamumo ir ergonomikos konkrečiam projektui.