如何在 React Native 中使用异步数据 (AsyncStorage) 初始化 MobX 存储

Question

我们创建了一个简单的 MobX 存储来保存对象。每次更改 fooObject 时，此 MobX 存储也会与 AsyncStorage 同步：

import { observable } from 'mobx';

class FooStore {
  @observable fooObject = {};

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

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

此 mobx 商店随后会被应用中的各种屏幕使用。

如您所见，我们使用 RN AsyncStorage，这是一种 LocalStorage，但对于本机应用程序，始终存储 fooObject 的当前状态。

问题是：当应用程序关闭时，我们会释放 FooStore 状态，因此我们想要检索我们对 AsyncStorage（持久化）所做的最后一个 'save'。

问题是 AsyncStorage 是（顾名思义）一个 ASYNC 函数，我们不能等待 FooStore 的构造函数中的 promise 解析。

如何根据已解析的 return AsyncStorage 值完成此 MobX 存储的初始状态初始化？

我们想过在 FooStore 中写一个初始化方法（异步方法）是这样的：

async initializeFromAsyncStorage() {
  this.fooObject = await JSON.parse(await AsyncStorage.getItem('fooObject'));
}

然后在我们的根 App.js.

中的应用程序初始化中调用此方法

但我不确定这是否会产生意想不到的副作用，以及这是否是惯用的 mobx/react-native。

Answer 1

是的，我会创建一个初始化方法。如果实例不依赖于初始数据，您可以在实例化后立即调用它：

const fooStore = new FooStore()
fooStore.initializeFromAsyncStorage()
export default fooStore

Thill 不保证在构建应用程序时加载初始数据，但由于数据是可选的可观察对象，您的应用程序将对其作出反应if/when它可用。

请记住，如果 AsyncStorage.getItem 尚未设置，它将解析 null，因此您可能需要这样做：

async initializeFromAsyncStorage() {
  const result = await AsyncStorage.getItem('fooObject')
  if (result !== null) {
    this.fooObject = JSON.parse(result)
  }
}

如何在 React Native 中使用异步数据 (AsyncStorage) 初始化 MobX 存储

How to initialize MobX store with async data (AsyncStorage) in React Native

react-native

mobx