Как использовать mobx-реагировать 'наблюдатель' без синтаксиса декоратора?

Question

Я пытаюсь вставить рожок mobx в приложение vr, которое я создаю с реагировать на 360. Я пытался использовать синтаксис декоратора, но, потратив немало времени на его реализацию, я решилиспользуйте синтаксис недекоратора.Вот пример, с которым я столкнулся из документации на mobx, по которой у меня есть вопрос.Вот код:

import {observer} from "mobx-react";

var timerData = observable({
    secondsPassed: 0
});

setInterval(() => {
    timerData.secondsPassed++;
}, 1000);

@observer class Timer extends React.Component {
    render() {
        return (<span>Seconds passed: { this.props.timerData.secondsPassed } </span> )
    }
};

ReactDOM.render(<Timer timerData={timerData} />, document.body);

Обратите внимание на объявление observer в классе Timer.Документация утверждает это.

Обратите внимание, что использование @observer в качестве декоратора необязательно, наблюдатель (класс Timer ... {}) достигает точно такого же результата.

Будет ли этобыть правильным способом реализации Timer?

observer(class Timer extends React.Component {
  render() {
    return (<span>Seconds passed: { this.props.timerData.secondsPassed } </span> )
  }
}) 

Answer 1

Что касается добавленного вами фрагмента кода, я не знаю, является ли он правильным способом или нет, но вот как я использую MobX без синтаксиса декоратора в своем проекте приложения:

Создайте свойМагазин MobX, скажем MyStore.js, например:

import {observable, action, computed, decorate} from 'mobx';

export default class MyStore {
    storeMap = observable(new Map());
    storeArray = observable([]);
    storeBoolean = false

    get storeMapSize() {
        return this.storeMap.size;
    }

    setStoreBoolean(value) {
        this.storeBoolean = value;
    }
}

decorate(MyStore, {
    storeMap: observable,
    storeArray: observable,
    storeBoolean: observable

    storeMapSize: computed,

    setStoreBoolean: action
});

Затем в вашем компоненте Timer.js:

import {inject, observer} from "mobx-react";

class Timer extends React.Component {
    render() {
        return (<span>value from store: { this.props.myStore.storeMap.get('any_key') } </span> )
    }
}

export default inject('myStore')(observer(Timer));

, и вы можете создать столько магазинов, сколько захотите, и вставить всеиз них к вашим компонентам, используя тот же метод inject и используйте их таким же образом через this.props, например

export default inject('myStore', 'anotherStore', 'anotherNewStore')(observer(Timer));