Como o modelo de estado reativo do MobX difere do Redux?

Question

Accepted Answer

**MobX** adota uma abordagem fundamentalmente diferente do Redux: em vez de actions explícitas e atualizações imutáveis, usa **reatividade transparente** — você muta o estado observable diretamente, e MobX rastreia automaticamente as dependências e atualiza tudo que depende disso (similar à reatividade do Vue ou Signals). ## MobX — observables mutáveis, rastreamento 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(() => ( )); ``` Você muta o estado diretamente (`this.count++`), e MobX automaticamente renderiza novamente apenas os componentes `observer` que leem `count`. Sem reducers, actions, dispatch ou imutabilidade manual. ## A diferença fundamental em filosofia ```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 ``` ## Como MobX rastreia dependências ```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 é a mesma ideia track-on-read/trigger-on-write por trás da reatividade do Vue e Signals. ## Compensações ```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 que isso importa MobX representa a escola **reativa/mutável** de gerenciamento de estado — o oposto da abordagem **explícita/imutável** do Redux. Entender o contraste esclarece um eixo de design fundamental: explícito-e-previsível (Redux: rastreie cada action, mas mais boilerplate) versus automático-e-conciso (MobX: mute livremente, menos código, mas menos explícito). O mesmo princípio reativo está por trás do Vue e Signals, então dominar MobX ilumina uma família inteira de ferramentas de estado e ajuda você a escolher entre previsibilidade e ergonomia para um determinado projeto.