如何异步地在商店构造函数上加载MobX数据？

Question

I'm trying to write a MobX store which loads data asychronously in the constructor. The problem is, when I try to update the @observable , it doesn't fire the changes, so the React component is never updated.

That's the store (actually, the setTimeout is a server call):

class MyStore {
  @observable isLoading = true;

  constructor() {
    setTimeout(() => {
      this.isLoading = false; // won't update the React component!
    }, 1000);
  }
}

This component blocks the app until the load is complete:

const MyComponent = ({store, children}) =>
  store.isLoading ?
    <div>Loading, please wait...</div> :
    children;

export default inject('store')(MyComponent);

How can I trigger the updates in the store constructor?

Answer 1

In the code provided your component is not marked as an observer, making it an observer should solve the problem. You can do it with @observer decorator provided by mobx-react package.

Notice that you should use observer before inject