Kako se MobX-ov reaktivni model stanja razlikuje od Redux-a?

Question

Accepted Answer

**MobX** koristi fundamentalno drugačiji pristup od Redux-a: umjesto eksplicitnih akcija i nepromjenjivih ažuriranja, koristi **transparentnu reaktivnost** — direktno mutate promatranu stanja, a MobX automatski prati zavisnosti i ažurira sve što ovisi o njima (slično kao Vue-ova reaktivnost ili Signals). ## MobX — mutable observable-a, automatsko praćenje ```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(() => ( )); ``` Direktno mutate stanja (`this.count++`), a MobX automatski ponovno renderira samo `observer` komponente koje čitaju `count`. Nema reducers, akcija, dispatch ili ručne nepromjenljivosti. ## Ključna razlika u filozofiji ```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 ``` ## Kako MobX prati zavisnosti ```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. ``` Ovo je ista ideja prati-na-čitanju/okini-na-pisanju iza Vue-ove reaktivnosti i Signals-a. ## Kompromisi ```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 ``` ## Zašto je to važno MobX predstavlja **reaktivnu/mutable** školu upravljanja stanjem — suprotno Redux-ovu **eksplicitnom/nepromjenjivom** pristupu. Razumijevanje kontrasta pojašnjava ključnu os dizajna: eksplicitno-i-predvidivo (Redux: pratite svaku akciju, ali više boilerplate) naspram automatskog-i-sažetog (MobX: slobodno mutate, manje koda, ali manje eksplicitno). Ista reaktivna načela leže u osnovi Vue-a i Signals-a, tako da razumijevanje MobX-a osvijetljava cijelu obitelj alata za upravljanje stanjem i pomaže vam odabrati između predvidljivosti i ergonomije za dati projekt.