React Native中MobX State Tree持久化状态加载时序异常问题

mst-persist的persist方法是异步执行的。现有逻辑中，调用initializeStore创建store实例后会立刻返回、挂载应用，此时AsyncStorage中存储的持久化数据还未读取完成、注入到store中，因此首轮渲染拿到的永远是模型定义的初始默认值temp: false；等异步读取完成、快照应用到store后才会触发二次渲染，这个时序问题和是否调用setTemp方法无关。

方案1：等待持久化加载完成后再挂载业务应用 #

这是最彻底的解决方式：persist方法本身返回Promise，等待该Promise状态变更为已完成，确认持久化数据全部注入store后，再渲染根业务组件，从根源上避免双次渲染、初始值误触发业务逻辑的问题。

代码修改 #

首先调整store初始化逻辑：

// RootStore.ts
import { onSnapshot } from 'mobx-state-tree';

// ... 原有RootStore模型定义保持不变

let _store: any = null;
let _persistLoaded = false;

export async function initializeStore() {
  if (_store) {
    return { store: _store, persistLoaded: _persistLoaded };
  }
  _store = RootStore.create({});
  // 等待持久化数据加载完成
  await persist('@initstore', _store, {
    storage: AsyncStorage,
    jsonify: true,
    whitelist: ['temp'], 
  });
  _persistLoaded = true;
  return { store: _store, persistLoaded: _persistLoaded };
}

// 其余Context、useStore定义保持不变

再修改应用入口，增加加载态判断：

// App.tsx
import { useEffect, useState } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import { initializeStore, Provider } from './src/store/RootStore';

export default function App() {
  const [rootStore, setRootStore] = useState(null);

  useEffect(() => {
    const initApp = async () => {
      const { store } = await initializeStore();
      setRootStore(store);
    };
    initApp();
  }, []);

  // 持久化未加载完成时展示全局加载页，不渲染业务组件
  if (!rootStore) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator />
        <Text>应用加载中</Text>
      </View>
    );
  }

  return (
    <Provider value={rootStore}>
      <RootStack />
    </Provider>
  );
}

该方案的优势是业务组件无需额外判断加载状态，所有组件挂载时拿到的就是完整的持久化数据，不会出现基于默认值误执行逻辑的问题。

方案2：业务层兼容加载状态 #

如果不想在入口阻塞渲染，可以对外暴露持久化加载完成的标记位，所有依赖持久化数据的业务逻辑（比如权限判断、路由跳转、初始化请求），都等标记位变为true之后再执行，避免被初始默认值干扰。

• 手动实现持久化逻辑：逻辑完全可控，不存在异步注入的时序问题。启动时先读取AsyncStorage中存储的快照，直接作为初始值传入RootStore.create()，之后通过onSnapshot监听store变化，防抖后写入存储即可。最简实现示例：

export async function initializeStore() {
  let initialSnapshot = { temp: false };
  try {
    const storedData = await AsyncStorage.getItem('@initstore');
    if (storedData) {
      initialSnapshot = JSON.parse(storedData);
    }
  } catch (err) {
    // 读取失败时使用默认值，可加错误日志上报
  }
  const store = RootStore.create(initialSnapshot);
  // 监听快照变化写入存储，可加防抖避免频繁IO
  onSnapshot(store, (snapshot) => {
    AsyncStorage.setItem('@initstore', JSON.stringify(snapshot));
  });
  return store;
}

• MST官方生态的persist中间件：API设计和mst-persist接近，原生支持白名单/黑名单配置、数据版本迁移、自定义序列化/反序列化逻辑，和MST的适配性更稳定。

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