mobx-state-tree-store-builder

majiayu000's avatarfrom majiayu000

Automates creation of MobX State Tree stores following Purrsuit Mobile App patterns for domain models, collections, and root store integration. Use when creating new MST stores, models, or extending existing store functionality with proper TypeScript typing, actions, views, and integration patterns.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 5, 2026
[Code Generation]

When & Why to Use This Skill

The MobX State Tree Store Builder is a specialized developer tool designed to automate the creation of MST stores, models, and root store integrations. It streamlines state management by generating boilerplate code that follows strict architectural patterns, ensuring consistent TypeScript typing, computed views, and asynchronous actions for scalable mobile and web applications.

Use Cases

  • Rapidly scaffolding new domain models with predefined TypeScript interfaces and snapshots to ensure type safety.
  • Building collection-based stores to manage complex maps or arrays of entities with standardized CRUD actions.
  • Seamlessly integrating new feature stores into an existing RootStore for global state access and dependency injection.
  • Implementing standardized asynchronous workflows using MST flows to handle API calls and side effects with proper error handling.
  • Extending existing store functionality with computed views and actions that require access to the global root state.
namemobx-state-tree-store-builder
descriptionAutomates creation of MobX State Tree stores following Purrsuit Mobile App patterns for domain models, collections, and root store integration. Use when creating new MST stores, models, or extending existing store functionality with proper TypeScript typing, actions, views, and integration patterns.

MobX State Tree Store Builder

This skill helps create MobX State Tree stores following the established patterns in the Purrsuit Mobile App. It handles the complex setup required for proper TypeScript integration, RootStore injection, and consistent architectural patterns.

When to Use This Skill

Use this skill when you need to:

  • Create a new domain model (like EncounterModel)
  • Build a collection store (like EncounterStoreModel)
  • Add a new store to the RootStore
  • Extend existing stores with new functionality
  • Create proper TypeScript interfaces and snapshots

Store Types

Domain Models

Atomic data models that represent business entities. Examples: EncounterModel, UserModel.

Pattern: types.model("Name", { ... }).views(...).actions(...)

Collection Stores

Stores that manage collections of domain models. Examples: EncounterStore, StatsStore.

Pattern: types.model("StoreName", { collection: types.map(Model) }).views(...).actions(...)

Singleton Stores

Stores with single-instance data. Examples: UserStore, UiStore.

Pattern: types.model("StoreName", { ... }).views(...).actions(...)

Root Store Integration

All stores must be added to the RootStore for dependency injection:

export const RootStoreModel = types.model("RootStore", {
  // Add new store here
  newStore: types.optional(NewStoreModel, {}),
  // ... existing stores
})

TypeScript Integration

Always export proper interfaces:

  • IStoreName - Instance type
  • IStoreNameSnapshotIn - Input snapshot type
  • IStoreNameSnapshotOut - Output snapshot type

Common Patterns

Computed Views

Use for derived data that depends on store state:

.views((self) => ({
  get computedProperty() {
    return self.someData * 2
  },
}))

Actions with Root Access

Use getRoot<IRootStore>(self) to access other stores:

.actions((self) => ({
  someAction() {
    const rootStore = getRoot<IRootStore>(self)
    rootStore.otherStore.doSomething()
  },
}))

Async Actions

Use flow for async operations:

import { flow } from "mobx-state-tree"

.actions((self) => ({
  asyncAction: flow(function* () {
    try {
      // async operations
      yield someAsyncCall()
    } catch (error) {
      // error handling
    }
  }),
}))

File Organization

Store files go in app/models/:

  • Domain models: ModelName.ts
  • Stores: StoreName.ts
  • Root store: RootStore.ts

Testing

Each store should have corresponding tests in app/models/__tests__/.

References

See MST_PATTERNS.md for detailed patterns and examples from the codebase.

See STORE_TEMPLATES.md for reusable templates.

See ROOT_STORE_INTEGRATION.md for adding stores to RootStore.