Understanding Minchyn’s State Management with MobX

MobX Reactive State: #

Minchyn uses MobX for state management, providing reactive, observable state with minimal boilerplate. MobX automatically tracks which components observe which data, updating only affected components when state changes. This is more intuitive than Redux for many developers and requires less code. Stores live in /store directory, organized by domain: UserStore handles authentication and user data, FeedStore manages content and posts, AdStore controls advertising state, MarketplaceStore handles marketplace data. Each store is a class with @observable properties, @action methods for mutations, and @computed properties for derived state.

Creating and Using Stores: #

Define stores with decorators: @observable tracks state changes, @action marks methods that modify state, @computed creates derived values that update automatically. Example: class UserStore { @observable user = null; @action setUser(user) { this.user = user; } @computed get isAuthenticated() { return !!this.user; } }. Instantiate stores in a root store: const rootStore = { userStore: new UserStore(), feedStore: new FeedStore() }. Provide stores via React Context: {children}. Access stores in components with hooks: const { userStore } = useStores(); observe(userStore.user).

Best Practices & Patterns: #

Keep stores focused on single domains–avoid god objects. Use actions for all state mutations to maintain predictability and enable debugging. Leverage @computed for expensive calculations that should cache results. Avoid storing derived data–compute it from base state. Use reactions for side effects: autorun, when, reaction. For async operations, use runInAction after awaits to batch updates. Structure stores hierarchically: root stores compose smaller feature stores. Enable MobX DevTools for debugging: mobx-react-devtools shows what triggered updates. Test stores in isolation with Jest by manipulating observables directly. Document complex state flows with comments or diagrams.