mobx-controller.js

import React from 'react';
import {render} from 'react-dom';
import {useStrict, computed, action, observable} from 'mobx';
import {Provider, observer, inject} from 'mobx-react';

useStrict(true);
class DataStore {
  @observable name;

  constructor(name) {
    this.name = name;
  }
}

class TestCompController {

  dataStore;
  @observable rand = '0';
  constructor({dataStore}) {
    this.dataStore = dataStore;
    setInterval(() => {
      this.setRand(Math.random());
    }, 2000);
  }
  @computed get name() {
    return `${this.dataStore.name} ${this.rand}`;
  }
  @action setRand(value) {
    this.rand = value.toString();
  }
}

@inject((allStores: AllStores) => ({
  controller: new TestCompController(allStores)
}))
@observer
class TestComp extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.controller.name}
      </div>
    );
  }
}

const rootEl = document.getElementById('root');
const stores = {
  dataStore: new DataStore('Yakir')
};

render(
  <Provider {...stores}>
    <TestComp/>
  </Provider>,
  rootEl
);