Persist data with mobx-persist and AsyncStore

Question

I'm trying to use AsyncStorage ('@react-native-community/async-storage') persistance using mobx-persist. My implementation is basically this: https://github.com/pinqy520/mobx-persist. I can see my store hydrated (in constructor of store itself). I can also access my store in my components, but no changes are persisted between app launches. Is mobx-persist even fit for that? What am I missing? Documentation is trivial, poor and outdated, as well as corresponding samples (appears to be quite typical for anything react-*).

UPDATE: just noticed it's reading in componentDidMount that fails. Looks like store is hydrated later then in componentDidMount. Any idea why?

Answer 1

Turns out store was indeed hydrated later. I've added store property to indicated hydration completion (notice I do not persist it):

  @observable hydrated = false;

  constructor() {
    hydrate('myStore', this).then(() => {
      this.hydrated = true;
    });
  }

Then in my component, I've started listening to hydration finish:

    when(
      () => this.props.observableStore.hydrated,
      () => this.doSomething(),
    );

However the above is not enough to make it work. I had to also add another babel plugin so that react-native/decorators/Flow did not mess with each other - it was actually key to my solution:

["@babel/plugin-proposal-class-properties", { "loose": true}]