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

时间:2018-05-06 03:28:48

标签: react-native mobx

我们创建了一个简单的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(持久化)。

问题是AsyncStorage是(如名称所示)ASYNC函数,我们不能在FooStore的构造函数中等待promise解析。

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

我们考虑在FooStore中编写一个初始化方法(async方法),如下所示:

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

然后在我们的根App.js中的app初始化上调用此方法。

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

1 个答案:

答案 0 :(得分:3)

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

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)
  }
}