如何异步加载存储构造函数上的 MobX 数据？

Question

我正在尝试编写一个 MobX 存储，它在构造函数中异步加载数据。问题是，当我尝试更新 @observable 时，它不会触发更改，因此 React 组件永远不会更新。

那是商店（实际上，setTimeout 是服务器调用）：

class MyStore {
  @observable isLoading = true;

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

此组件会阻止应用程序，直到加载完成：

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

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

如何在商店构造函数中触发更新？

Answer 1

在提供的代码中，您的组件未标记为观察者，使其成为观察者应该可以解决问题。您可以使用 mobx-react 包提供的 @observer 装饰器来完成。

请注意，您应该使用 observer before inject

如何异步加载存储构造函数上的 MobX 数据？

How to load MobX data on store constructor, asynchronously?

javascript

asynchronous

reactjs

mobx

mobx-react