如何在 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 商店。

正如您所看到的，我们使用 RNAsyncStorage来始终存储 的当前状态，RN 是一种 LocalStorage，但对于本机应用程序而言fooObject。

问题是：当应用程序关闭时，我们会丢失 FooStore 状态，因此我们想要检索对 AsyncStorage 所做的最后一次“保存”（已持久保存）。

问题是 AsyncStorage（正如其名称所示）是一个 ASYNC 函数，我们不能等待 FooStore 构造函数中的承诺解析。

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

我们考虑在 FooStore 中编写一个初始化方法（异步方法），如下所示：

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

然后在我们的根 App.js 中的应用程序初始化时调用此方法。

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

Answer 1

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

\n\n

const fooStore = new FooStore()\nfooStore.initializeFromAsyncStorage()\nexport default fooStore\n

\n\n

Thill 不会保证在构建应用程序时加载初始数据，但由于数据是可选的可观察数据，因此如果/当它\xe2\x80\x99s 可用时，你的应用程序将对它做出反应。

\n\n

记住这AsyncStorage.getItem会解决null如果尚未设置，

\n\n

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

\n