title: Ajax call in MobX: MobX observer: Store is not available! Make sure it is provided by some Provider
body: <p>I'm migrating from a traditional React application with the tree-structure to a state management structure with MobX.</p>
  
  <p>Currently, my individual components propagate down data from an Ajax call made by the parent/grandparent, which works fine.</p>
  
  <p>Now I wish to change this so that I don't work in the tree structure anymore due to the change of complexity and dependency of parallel grandchildren/children.</p>
  
  <p>Say I do an <code>axios.get</code> in <code>componentDidMount</code> of a <code>&lt;Parent1/&gt;</code> React class. How do I then access the data using <code>MobX</code>?</p>
  
  <p>What I've tried so far:</p>
  
  <p>Creating a <code>store.jsx</code> that looks as such:</p>
  
  <pre><code>import { observable } from 'mobx';
  const axios = require('axios');
  
  class Store {
      @observable parentdata;
      loadParent = () =&gt; {
          let that = this;
          axios.get("/api/parent").then(function(response){
              that.parentdata = response.parentdata;
          }).catch(function(error){
           // Error handling
          })
      };
  }
  
  export default Store;
  </code></pre>
  
  <p>My <code>ReactDOM</code> is rendered in <code>container.jsx</code> which contains all parents, meaning also <code>&lt;Parent1/&gt;</code>. In <code>container.jsx</code> we do the following:</p>
  
  <pre><code>import { Provider } from 'mobx-react';
  
  import Store from './store/store.jsx';
  let store = new Store();
  </code></pre>
  
  <p>and</p>
  
  <pre><code>ReactDOM.render(
      &lt;Provider store={store}&gt;
          &lt;Main /&gt;
      &lt;/Provider&gt;,
      document.getElementById('content')
  );
  </code></pre>
  
  <p>.. in the end.</p>
  
  <p>In the render method of <code>container.jsx</code> I don't do anything with <code>&lt;Parent1/&gt;</code> - it simply renders the component as normal(that's the idea here, right?)</p>
  
  <p>In <code>parent1.jsx</code>, I remove the previous <code>axios.get</code> and add these:</p>
  
  <pre><code>import { inject, observer } from 'mobx-react';
  
  
  @inject('store') @observer
  export default class Parent1 extends React.Component {
  // ..... 
  
   componentDidMount () {
          this.props.store.loadParent();
  </code></pre>
  
  <p>After that, the error is provided: <code>MobX observer: Store 'parentdata' is not available! Make sure it is provided by some Provider</code></p>
  
  <p>Where did I go wrong in binding the data here?</p>
  
  <p>Edit: Removing <code>@inject</code> and only having <code>@observer</code> results in: <code>TypeError: Cannot read property 'loadParent' of undefined</code></p>