将 MobX 存储保存和加载到 React Native AsyncStorage 的最佳模式？

Question

我有一个使用 MobX 的 React Native 应用程序。我的商店有一个默认对象，当用户使用操作更新值时（在 Options.js 文件中），我想将其保存在本地（React Native 的 AsyncStorage）以便下次打开应用程序时该对象未重置为默认值。首先运行处理此问题、检查和加载新值的良好模式是什么？

我的 RootStore.js 看起来像这样：

import { observable, action } from 'mobx';

export default class RootStore {
  constructor() {
    this.sources = new Sources(this);
  }
}

class Sources {
  constructor(rootStore) {
    this.rootStore = rootStore;
  }
  @observable
  left = [
    {
      active: 'yes',
      side: 'value One',
      name: 'value Two',
    },
  ];
//passing in new object from Options.js
  @action
  updateActiveLeft(data) {
    let object = data;
    this.left = object;
    console.log('New active name set in store - ' + this.left[0].name);
  }

Answer 1

我已经更新了您的文件以包含我在所有 React Native 应用程序中使用的基本模式。我正在使用 async/await 语法来处理异步调用，但您可以使用 promises 或您喜欢的任何模式。您可能还想将其设为 DRY class 以处理所有本地 API。请注意，如果您在商店中存储非 mobx 方法，这将不起作用，因为 mobx.toJS 不会删除它们并且 JSON.stringify 无法序列化函数。

编辑：修复了编译错误并添加了 updateStore() 方法。

import { observable, action, toJS } from 'mobx';
import { AsyncStorage } from 'react-native';
import _ from 'lodash';

export default class RootStore {
  constructor() {
    this.sources = new Sources(this);
    // You can move this to your App.js class when your app
    // for more control but this will start loading your data
    // as soon as RootStore is created.
    this.sources.refreshStores();
  }
}

class Sources {

  @observable
  left = [
    {
      active: 'yes',
      side: 'value One',
      name: 'value Two',
    },
  ];

  //passing in new object from Options.js
  @action
  updateActiveLeft(data) { // May want to make this a promise or async
    let object = data;
    // this.left = object; // Now using updateStore to set MobX obs
    this.updateStore(toJS(object)).then(() => {
      console.log('Data is now saved in AsyncStorage.')
    });
  }

  /**
   * Set async data to local memory
   * @param newdata {object} An updated store abject
   */
  @action
  updateStore = async (newdata) => {
    try {
      const AppData = newdata;
      // Set MobX observables with new data
      _.forEach(AppData, (value, key) => {
        this[key] = value;
      });
      // Set AsyncStorage
      await AsyncStorage.setItem('app', JSON.stringify(AppData));
    } catch(e) {
      console.log('Could not update app store. [store/App]')
    }
  }

  /**
   * Set MobX data from AsyncStorage
   */
  @action
  refreshStores = async () => {
    try {
      const RootStore = await this.getStore();
      // I store my data in AsyncStorage exactly the same way I store my observables
      // so that when I recall them I can just iterate through my object or array
      // and set them easily to MobX observables.
      _.forEach(RootStore, (value, key) => {
        this[key] = value;
      });
    } catch(e) {
      console.log('Could not refresh app store.');
    }
  }

  /**
   * Retrieve data from AsyncStorage
   */
  @action
  getStore = async () => {
    try {
      // I'm just using RootStore as a storage key name but you can use whatever you want.
      // I'm also shortcircuiting the call to async to be replaced with the default values
      // in case the store doesn't exist.
      let RootStore = await AsyncStorage.getItem('RootStore') || JSON.stringify(toJS(this));
      RootStore = JSON.parse(RootStore);
      return RootStore;
    } catch(e) {
      console.log('Could not get data from store.')
    }
  }

}

Answer 2

您可以尝试使用 mobx-decorators 中的 @save 装饰器。但请记住 @save 是惰性装饰器，值将在第一次属性访问后加载。

将 MobX 存储保存和加载到 React Native AsyncStorage 的最佳模式？

Best pattern for saving and loading MobX store to React Native AsyncStorage?

javascript

react-native

mobx