从Redux迁移至Ignite Boilerplate：MST Store如何初始化初始状态

先搞懂Boilerplate的内置状态加载逻辑 #

很多刚适配这个模板的人都找不到单独的初始化入口，核心原因是这个boilerplate根本没把「状态初始化」和「持久化状态恢复」拆成两个独立流程，而是把二者完全绑在统一的setup链路里：

• 全项目的根Store实例化，从来不是靠手动调用模型的create方法完成的，所有逻辑都收拢在app/models目录下的setupRootStore封装函数里
• 这个函数的执行顺序固定是：先读取本地存储的历史状态快照→把快照和模型自带的默认值合并→生成可用的根Store实例→挂载MST依赖的全局环境→触发rehydration完成事件

三种可落地的自定义初始状态集成方式 #

1. 最基础的默认值配置：直接在模型定义层设置 #

如果你的初始状态是静态固定值，不需要动态计算，直接在对应子模型的字段定义里用types.optional传入默认值即可：

// 以用户模块的模型定义为例
const UserModel = types.model("User", {
  // 冒号后的参数就是该字段的全局初始默认值
  isFirstLaunch: types.optional(types.boolean, true),
  themeMode: types.optional(types.string, "light"),
})

注意：这类默认值的生效优先级最低，只有两种场景会触发：首次安装无本地历史快照、本地快照中缺失对应字段的配置。如果本地已存了该字段的持久化值，会优先使用快照里的内容。

2. 高优先级自定义初始值：在实例化阶段合并快照 #

如果你的自定义初始值需要覆盖历史快照的同名字段，可以直接修改setupRootStore函数里的快照合并逻辑：

• 找到函数内读取本地快照、调用RootStore.create()的代码段
• 按照「自定义值 > 历史快照 > 模型默认值」的优先级，将自定义初始对象和读取出的本地快照做深度合并，再把合并后的结果传给create方法
  示例代码：

// 原逻辑：直接把本地读到的快照传给create
// const rootStore = RootStore.create(localSnapshot, environment)
// 修改后：插入自定义初始值
const customInitialState = {
  appConfig: {
    defaultLocale: "zh-CN"
  }
}
const mergedSnapshot = {
  ...customInitialState,
  ...localSnapshot,
  // 嵌套字段需要做深度合并，避免子配置被全量覆盖
  appConfig: {
    ...customInitialState.appConfig,
    ...localSnapshot?.appConfig
  }
}
const rootStore = RootStore.create(mergedSnapshot, environment)

3. 异步初始值处理：利用rehydration完成钩子接入 #

如果你的初始值需要经过异步逻辑计算（比如读取设备系统配置、拉取远程全局参数、读取本地加密存储的用户配置），不要硬塞到同步的create参数里，可以利用流程内置的钩子：

1. 在根Store模型上定义专门的初始化Action，用来接收异步拿到的初始值并更新对应字段
2. 在App启动入口的setupRootStore回调里，等rehydration流程完成、Store已经挂载到Provider后，执行你的异步初始化逻辑，再调用定义好的Action把值写入Store

适配避坑提示 #

• 不要绕开boilerplate自带的setupRootStore，自己在App入口手动创建Store实例：这个封装函数已经内置了开发模式下的MST调试工具挂载、全局环境依赖注入、持久化存储适配器初始化的逻辑，手动创建会直接丢失这些内置能力
• 如果某个字段需要每次启动都用自定义初始值，不希望被历史快照覆盖，可以把该字段从模型的持久化定义中移除，改用types.volatile做内存存储，避免被持久化流程写进本地快照

内容的提问来源于stack exchange，提问作者Fredyonge