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

254

sandre89

我们创建了一个简单的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来存储的当前状态，这是LocalStorage的一种，但用于本机应用程序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。

戴维·海灵

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

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

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

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。