Back to Details

mobx-state-tree-store-builder

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

MobX State Tree Store Builder

MobX State Tree 存储构建器

This skill helps create MobX State Tree stores following the established patterns in the Fitness Tracker App. It handles the complex setup required for proper TypeScript integration, RootStore injection, and consistent architectural patterns.
本技能可帮助你按照健身追踪应用中已确立的模式创建MobX State Tree存储，处理TypeScript集成、RootStore注入以及一致架构模式所需的复杂配置。

When to Use This Skill

何时使用本技能

Use this skill when you need to:
  • Create a new domain model (like ExerciseModel)
  • Build a collection store (like ExerciseStoreModel)
  • Add a new store to the RootStore
  • Extend existing stores with new functionality
  • Create proper TypeScript interfaces and snapshots
适用于以下场景：
  • 创建新的领域模型（如ExerciseModel）
  • 构建集合存储（如ExerciseStoreModel）
  • 向RootStore中添加新存储
  • 为现有存储扩展新功能
  • 创建规范的TypeScript接口和快照

Store Types

存储类型

Domain Models

领域模型

Atomic data models that represent business entities. Examples: 
ExerciseModel
, 
UserModel
.
Pattern: 
types.model("Name", { ... }).views(...).actions(...)
代表业务实体的原子数据模型。示例：
ExerciseModel
、
UserModel
。
模式：
types.model("Name", { ... }).views(...).actions(...)

Collection Stores

集合存储

Stores that manage collections of domain models. Examples: 
ExerciseStore
, 
StatsStore
.
Pattern: 
types.model("StoreName", { collection: types.map(Model) }).views(...).actions(...)
管理领域模型集合的存储。示例：
ExerciseStore
、
StatsStore
。
模式：
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(...)
存储单实例数据的存储。示例：
UserStore
、
UiStore
。
模式：
types.model("StoreName", { ... }).views(...).actions(...)

Root Store Integration

根存储集成

All stores must be added to the RootStore for dependency injection:
typescript
export const RootStoreModel = types.model("RootStore", {
  // Add new store here
  newStore: types.optional(NewStoreModel, {}),
  // ... existing stores
})
所有存储都必须添加到RootStore中以实现依赖注入：
typescript
export const RootStoreModel = types.model("RootStore", {
  // Add new store here
  newStore: types.optional(NewStoreModel, {}),
  // ... existing stores
})

TypeScript Integration

TypeScript集成

Always export proper interfaces:
  • IStoreName
    - Instance type
  • IStoreNameSnapshotIn
    - Input snapshot type
  • IStoreNameSnapshotOut
    - Output snapshot type
请始终导出规范的接口：
  • IStoreName
    - 实例类型
  • IStoreNameSnapshotIn
    - 输入快照类型
  • IStoreNameSnapshotOut
    - 输出快照类型

Common Patterns

常见模式

Computed Views

计算视图

Use for derived data that depends on store state:
typescript
.views((self) => ({
  get computedProperty() {
    return self.someData * 2
  },
}))
用于处理依赖存储状态的派生数据：
typescript
.views((self) => ({
  get computedProperty() {
    return self.someData * 2
  },
}))

Actions with Root Access

可访问根存储的动作

Use 
getRoot<IRootStore>(self)
to access other stores:
typescript
.actions((self) => ({
  someAction() {
    const rootStore = getRoot<IRootStore>(self)
    rootStore.otherStore.doSomething()
  },
}))
使用
getRoot<IRootStore>(self)
访问其他存储：
typescript
.actions((self) => ({
  someAction() {
    const rootStore = getRoot<IRootStore>(self)
    rootStore.otherStore.doSomething()
  },
}))

Async Actions

异步动作

Use 
flow
for async operations:
typescript
import { flow } from "mobx-state-tree"

.actions((self) => ({
  asyncAction: flow(function* () {
    try {
      // async operations
      yield someAsyncCall()
    } catch (error) {
      // error handling
    }
  }),
}))
使用
flow
处理异步操作：
typescript
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
存储文件需放置在
app/models/
目录下：
  • 领域模型：
    ModelName.ts
  • 存储：
    StoreName.ts
  • 根存储：
    RootStore.ts

Testing

测试

Each store should have corresponding tests in 
app/models/__tests__/
.
每个存储都应在
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.
如需了解代码库中的详细模式和示例，请查看MST_PATTERNS.md。
如需可复用模板，请查看STORE_TEMPLATES.md。
如需了解向RootStore添加存储的方法，请查看ROOT_STORE_INTEGRATION.md。