title: ReactJS and separate model
body: <p>I'm looking at ReactJS as being the view in my application which has a model and a bunch of components. I can see how my model can talk to React, but how does React then talk to the rest of my application?</p>
  
  <p>It's very simple to pass in data or a model into React:</p>
  
  <pre><code>var ui = ReactDOM.render(&lt;UI model={model} /&gt;, document.getElementById('ui'));
  </code></pre>
  
  <p>I assumed you could set the model like so:</p>
  
  <pre><code>constructor(props) {
    super(props); 
    this.state = {
      model: this.props.model
    }
  }
  </code></pre>
  
  <p>Although <code>state</code> should treated as immutable according to the documents, as it's not updated instantly. So I cannot access my model through <code>state</code>, <a href="http://codepen.io/bitten/pen/YWGMWd?editors=1010" rel="nofollow">I have a very bad codepen example here</a> showing how I've made it work in the wrong way. How else can I do this?</p>