Kako se reaktivni model stanja MobX razlikuje od Reduksa?

Question

Accepted Answer

**MobX** prevzema temeljno drugačen pristop od Reduksa: namesto eksplicitnih akcij in nespremenljivih posodobitev uporablja **transparentno reaktivnost** — stanje opazljivih spremenljivk spreminjate neposredno, MobX pa samodejno sledi odvisnostim in posodobi vse, kar je odvisno od njega (podobno kot Vue-jeva reaktivnost ali Signals). ## MobX — spremenljive opazljivke, samodejno sledenje ```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(() => ( )); ``` Stanje spreminjate neposredno (`this.count++`), MobX pa samodejno ponovno prikaže le `observer` komponente, ki berejo `count`. Brez reducerjev, akcij, dispečiranja ali ročnega zagotavljanja nespremenljivosti. ## Osnovna razlika v 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 sledi odvisnostim ```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. ``` To je ista ideja sledenja-ob-branju/sprožitve-ob-pisanju, ki je v ozadju Vue-jeve reaktivnosti in Signalsov. ## 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 ``` ## Zakaj je to pomembno MobX predstavlja **reaktivno/spremenljivo** šolo upravljanja stanja — nasprotje Reduksovega **eksplicitnega/nespremenljivega** pristopa. Razumevanje kontrasta pojasnjuje ključno os oblikovanja: eksplicitno-in-predvidljivo (Redux: sledi vsaki akciji, vendar več standardnega koda) proti avtomatsko-in-jedrnato (MobX: prosto spreminjaj, manj kode, vendar manj eksplicitno). Ista reaktivna načela so v ozadju Vue in Signalsov, zato razumevanje MobX-a osvetli celo družino orodij za stanje in ti pomaga izbrati med napovedljivostjo in ergonomijo za dani projekt.