Как загрузить данные 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

В предоставленном коде ваш компонент не помечен как наблюдатель, поэтому проблему должен решить наблюдатель. Вы можете сделать это с @observer декоратор предоставлен mobx-react пакет.

Обратите внимание, что вы должны использовать наблюдателя перед инъекцией