Mobx Playground

by kasheftin

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/paper/bootstrap.min.css">
<script src="https://npmcdn.com/mobx-react@3.5.8/index.js"></script>
<script src="https://npmcdn.com/mobx@latest/lib/mobx.umd.js"></script>
<script src="https://npmcdn.com/mobx-react@latest/index.js"></script>
<div class="container">
  <div id="mount">
  
  </div>
</div>

Babel + JSX

const {observable, reaction, action} = mobx;
const {observer} = mobxReact;
const {Component} = React;
const {render} = ReactDOM;

@observer class Alert1 extends Component {
  constructor(props) {
    super(props);
    this.r2 = reaction(
      () => this.props.v1,
      v => console.log("Alert1 reaction trigger",v)
    );
  }
  render() {
    return null;
  }
}

@observer class Alert2 extends Component {
  constructor(props) {
    super(props);
    this.r2 = reaction(
      () => this.props.showObj.prop,
      v => console.log("Alert2 reaction trigger",v)
    );
  }
  render() {
    return null;
  }
}

@observer class Main extends Component {
  @observable v1 = false;
  constructor(props) {
    super(props);
    this.r1 = reaction(
      () => this.v1,
      v => console.log("Main reaction trigger",v)
    );
    this.v2 = observable({prop:observable(false)});
    this.r2 = reaction(
      () => [this.v2.prop],
      v => console.log("Main reaction obj trigger",v)
    );
  }
  render() {
    return (
      <div>
        <Alert1 v1={this.v1} />
        <button onClick={e=>this.v1=!this.v1}>Switch</button>
        <Alert2 showObj={this.v2} />
        <button onClick={e=>this.v2.prop=!this.v2.prop}>Switch</button>
      </div>
    );
  }
}

render(<Main />,document.getElementById("mount"));