Вызов функции хранилища Mobx в другом компоненте Observer

Question

У меня есть магазин Mobx, и я передаю этот магазин внутри провайдера, и когда я его утешаю, он показывает структуру магазина Mobx.

Ниже мой магазин Mobx

import { observable, computed, action, useStrict, runInAction, toJS } from 'mobx';

// useStrict(true);

class OpenPropertiesStore {

  @observable openProperties = {};

  @action
  fetchOpenProperties() {
    fetch(`http://uinames.com/api/`)
      .then(res => res.json())
      .then(data => {
        runInAction(() => {
          this.openProperties = data;
          this.name = "abhinav";
        })
      })
  }

  @computed get getOpenProperties() {
    return this.openProperties;
  }

}

export default new OpenPropertiesStore();

Внутри компонента я вызываю ComponentDidMount, где, если я печатаю "this.props", он показывает магазин. Но я не могу вызвать функцию, как это

@inject('UserStore', 'CityStore', 'OpenPropertiesStore')
@observer
export default class Navigation extends Component {
   componentDidMount = async () => {
      const { CityStore, UserStore, OpenPropertiesStore } = this.props;
      const data = OpenPropertiesStore.getOpenProperties();
   }
}

давая мне ошибку

YellowBox.js:67 Возможное необработанное отклонение обещания (id: 0): TypeError: OpenPropertiesStore.getOpenProperties не является функцией TypeError: OpenPropertiesStore.getOpenProperties не является функцией

Кто-нибудь знает, как решить эту ошибку

Answer 1

Вычисленный MobX не должен вызываться как функция, доступ к ним осуществляется как свойство.

const data = OpenPropertiesStore.getOpenProperties;

Также, если вы просто хотите вернуть свойство из хранилища - не нужно писать отдельный @computed для него, так как вы не делаете никаких вычислений в нем. Просто получить к нему доступ напрямую

const data = OpenPropertiesStore.openProperties;