如何在React Native中使用异步数据（AsyncStorage）初始化MobX Store

嘿，这个问题我太熟悉了！要让你的FooStore从AsyncStorage的异步数据完成初始化，咱们可以用两种实用的方式来实现，下面给你详细拆解：

方案一：在Store类中添加异步初始化方法 #

给FooStore新增一个init方法，专门用来从AsyncStorage读取数据并初始化fooObject，用async/await处理异步逻辑，避免回调地狱：

import { observable } from 'mobx';
import AsyncStorage from '@react-native-async-storage/async-storage'; // 别忘了导入AsyncStorage

class FooStore {
  @observable fooObject = {};

  // 异步初始化方法
  async init() {
    try {
      // 从AsyncStorage读取存储的fooObject数据
      const storedFoo = await AsyncStorage.getItem('fooObject');
      if (storedFoo) {
        // 如果有数据，解析后赋值给fooObject
        this.fooObject = JSON.parse(storedFoo);
      }
    } catch (error) {
      // 处理读取失败的情况，比如打印错误日志
      console.error('Failed to load fooObject from AsyncStorage:', error);
    }
  }

  setFooObject(newFooObject) {
    this.fooObject = newFooObject;
    this.syncWithAsyncStorage();
  }

  syncWithAsyncStorage() {
    AsyncStorage.setItem('fooObject', JSON.stringify(this.fooObject));
  }
}

使用方式 #

在应用入口（比如App.js），创建Store实例后调用init方法，等初始化完成再渲染页面：

const fooStore = new FooStore();

// 等待初始化完成后再启动应用
fooStore.init().then(() => {
  AppRegistry.registerComponent(appName, () => App);
});

方案二：用工厂函数异步创建Store实例 #

如果希望在创建Store的同时完成初始化，可以写一个工厂函数，返回一个Promise，resolve出初始化好的Store实例：

import { observable } from 'mobx';
import AsyncStorage from '@react-native-async-storage/async-storage';

class FooStore {
  @observable fooObject = {};

  setFooObject(newFooObject) {
    this.fooObject = newFooObject;
    this.syncWithAsyncStorage();
  }

  syncWithAsyncStorage() {
    AsyncStorage.setItem('fooObject', JSON.stringify(this.fooObject));
  }
}

// 异步创建Store的工厂函数
async function createFooStore() {
  const store = new FooStore();
  try {
    const storedFoo = await AsyncStorage.getItem('fooObject');
    if (storedFoo) {
      store.fooObject = JSON.parse(storedFoo);
    }
  } catch (error) {
    console.error('Failed to initialize FooStore:', error);
  }
  return store;
}

使用方式 #

在应用入口调用这个工厂函数，拿到初始化后的Store再使用：

createFooStore().then((fooStore) => {
  // 把fooStore传递给应用的各个页面，比如通过Context或者props
  AppRegistry.registerComponent(appName, () => () => <App fooStore={fooStore} />);
});

注意点 #

• 一定要处理异步操作的异常，避免读取AsyncStorage失败导致应用崩溃
• 因为初始化是异步的，在页面使用Store的时候，可以加个加载状态，比如在数据没加载完成时显示loading，避免页面出现空数据的情况

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