¿Cómo difiere el modelo de estado reactivo de MobX de Redux?

Question

Accepted Answer

**MobX** adopta un enfoque fundamentalmente diferente al de Redux: en lugar de acciones explícitas y actualizaciones inmutables, utiliza **reactividad transparente** — mutas el estado observable directamente, y MobX automáticamente rastrea dependencias y actualiza todo lo que depende de él (similar a la reactividad de Vue o Signals). ## MobX — observables mutables, rastreo automático ```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(() => ( )); ``` Mutas el estado directamente (`this.count++`), y MobX automáticamente re-renderiza solo los componentes `observer` que leen `count`. Sin reducers, actions, dispatch ni inmutabilidad manual. ## La diferencia central en la filosofía ```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 ``` ## Cómo MobX rastrea dependencias ```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. ``` Esta es la misma idea track-on-read/trigger-on-write detrás de la reactividad de Vue y Signals. ## Compensaciones ```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 ``` ## Por qué es importante MobX representa la escuela **reactiva/mutable** de la gestión de estado — lo opuesto al enfoque **explícito/inmutable** de Redux. Comprender el contraste aclara un eje de diseño clave: explícito-y-predecible (Redux: rastrea cada acción, pero más código repetitivo) versus automático-y-conciso (MobX: muta libremente, menos código, pero menos explícito). El mismo principio reactivo subyace en Vue y Signals, por lo que comprender MobX ilumina una familia completa de herramientas de estado y te ayuda a elegir entre previsibilidad y ergonomía para un proyecto determinado.