首页 文章

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

提问于
浏览 次
2

我们创建了一个简单的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 .

react-native mobx

1 回答

  • 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)
  }
}
    回复于

相关问题