Feature/mobx

[brunolm]

install

+    "mobx": "^5.0.3",
+    "mobx-react": "^5.2.3",
+    "mobx-react-devtools": "^5.0.1",

entry

configure({ enforceActions: true });
 	 
ReactDOM.render(
<Provider store={store}>
   <App />
 </Provider>,
 document.getElementById('root') as HTMLElement,
);

store

import { action, observable } from 'mobx';

export default class AppStore {
  @observable title = 'Initial title';

  @observable counter = 0;

  @action
  updateTitle() {
    this.title = Math.random().toString(32);
  }

  @action
  count() {
    this.counter++;
  }
}

export default new AppStore();

component

@inject('store')
@observer
export default class Counter extends React.Component<Props, State> {
  toggle = () => {
    this.props.store.count();
  }

  render() {
    const { store } = this.props;

    return (
      <div className="home">
        <h2>Counter: {store.counter}</h2>
        <button className="toggle-status" onClick={this.toggle}>
          Toggle Status
        </button>
      </div>
    );
  }