enforceActions observed-to-always transition in MobX 6 incremental migration

Question

An incremental MobX migration for a small React application aims to transition from decorator-based observable inference in MobX 5 to the makeAutoObservable API in MobX 6 without service interruption. The precise goal is to preserve observable consistency across coexisting store modules while aligning with MobX 6's configuration boundaries. A key uncertainty involves the enforceActions setting: keeping it at observed maintains backward compatibility but defers runtime checks, whereas switching to always treats mutations outside actions as exceptions, potentially breaking existing code paths. Additionally, makeAutoObservable inference depends on TypeScript and Babel configuration, and shared observable references between MobX 5 and MobX 6 modules can produce double tracking or missed reactions when inference rules diverge. How should the enforceActions configuration be set during incremental migration to balance compatibility with MobX 5 stores and enforcement consistency in MobX 6? What annotations or configuration adjustments prevent double tracking when cross-version store modules reference shared state? Does the opt-in decorator requirement in MobX 6 necessitate a full store rewrite, or can incremental adoption coexist with existing decorator-based definitions?

Tasadduq Burney · Answer

enforceActions Configuration Strategy
During an incremental migration from MobX 5 to MobX 6, set enforceActions to "observed". This maintains backward compatibility by only throwing errors when an observable is actually being observed by a reaction, preventing immediate runtime crashes in legacy MobX 5 stores that may perform direct mutations.

Implementation Steps

Initial State: Configure configure({ enforceActions: "observed" }) to allow legacy stores to coexist with new makeAutoObservable modules.
Shared State Stabilization: For stores shared between MobX 5 and 6 modules, use explicit @observable decorators rather than relying solely on makeAutoObservable inference to ensure consistent tracking across version boundaries.
Action Wrapping: Wrap any new mutations in runInAction or defined actions to prepare for strict enforcement.
Final Transition: Once all legacy stores are migrated or audited, switch to enforceActions: "always" to guarantee state consistency.

Addressing Double Tracking and Decorators
Double tracking typically occurs when a property is marked as observable by both a legacy decorator and a MobX 6 inference rule. To prevent this, ensure a shared store is instantiated once and that its definition is consistent across the application. The opt-in decorator requirement in MobX 6 does not necessitate a full rewrite; existing decorator-based stores can coexist with makeAutoObservable as long as the Babel/TypeScript configuration supports the legacy decorator syntax.

Verification
Verify the configuration at the application entry point:
import { configure } from "mobx";

configure({
  enforceActions: "observed", // Transition to "always" post-migration
});

Missing Diagnostic Detail: Are there specific third-party libraries interacting with your stores that rely on direct mutation? This determines if "always" can ever be safely enabled.

enforceActions observed-to-always transition in MobX 6 incremental migration

1 answer

enforceActions Configuration Strategy

Implementation Steps

Addressing Double Tracking and Decorators

Verification

Your perspective belongs here.

0 question comments