react-native - 如何在 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 但对于 native 应用程序，始终存储 fooObject 的当前状态.

问题是:当应用程序关闭时，我们失去了 FooStore 状态，所以我们想要检索我们对 AsyncStorage 所做的最后一次“保存”(这是持久的)。

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

如何根据 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 不能保证在构建应用程序时加载初始数据，但由于数据是可选的 observable，如果/当它可用时，您的应用程序将对其使用react。

请记住 AsyncStorage.getItem将解决 null如果尚未设置，则您可能需要执行以下操作:

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