title: How to use mobx observer without the class in react
body: <p>I am using <code>axios</code> and <code>mobx</code> in my react native project. One of the component (<code>Home</code>) on mount calls for a method (<code>getBirds()</code>) from a different file where all the API methods are organized.</p>
  
  <p>store.js: </p>
  
  <pre><code>class BirdStore {
      @observable birdList = [];
  
      @action setBirdList = (birds) =&gt; {
          this.birdList = birds;
      };
  }
  </code></pre>
  
  <p>Home.js:</p>
  
  <pre><code>@observer @inject("BirdStore")
  export default class Home extends React.Component {    
      componentDidMount() {
          api.getBirds()
          ...
      }
  }
  </code></pre>
  
  <p>api.js:</p>
  
  <pre><code>@inject('BirdStore') @observer
  const api = {    
      getBirds() {
          const url = website + '/api/birds/';
          return axios.get(url)
              .then((response) =&gt; {
                  this.props.BirdStore.setBirdList(response.data)
              })
              .catch((error) =&gt; {
                  console.log(error);
              })
      },
  };
  </code></pre>
  
  <p>But this gives me an error:</p>
  
  <blockquote>
    <p>Leading decorator must be attached to a class declaration</p>
  </blockquote>
  
  <p>I can use the data from the server returned by the <code>getBirds()</code> into <code>Home</code> component, and then call the <code>setBirdList()</code> action, but I wanted to keep api related stuff separately. Is there anyway to use <code>mobx</code> without the class so that I can handle all the api related stuff other than the class component itself?</p>