title: Reactjs: How to fetch data to loaded before the component is mounted?
body: <p>Something weird is happening, I've been reading the React docs and they talk about the lifecycle and how you can do somestuff before your component is rendered. I am trying, but everything I try is failing, always the component makes the render first and after calls componenWillMount, ..didMount, etc.. and after the call of those functions, the render happens again. </p>
  
  <p>I need to load the data first in order to fill the state because I don't want initial state to be <code>null</code>, I want it with data since the initial rendering.</p>
  
  <p>I am using Flux and Alt, here is the </p>
  
  <p><strong>action</strong></p>
  
  <pre><code>@createActions(flux)
  class GetDealersActions {
  
    constructor () {
      this.generateActions('dealerDataSuccess', 'dealerDataFail');
    }
  
    getDealers (data) {
      const that = this;
      that.dispatch();
      axios.get(`${API_ENDPOINT}/get-dealers/get-dealers`)
        .then(function success (response) {
          console.log('success GetDealersActions');
          that.actions.dealerDataSuccess({...response.data});
        })
    }
  }
  </code></pre>
  
  <p>then the <strong>store</strong></p>
  
  <pre><code>@createStore(flux)
  class GetDealersStore {
  
    constructor () {
      this.state = {
        dealerData : null,
      };
    }
  
    @bind(GetDealersActions.dealerDataSuccess)
    dealerDataSuccess (data) {
      this.setState({
        dealerData : data,
      });
    }
  
  }
  </code></pre>
  
  <p>and the <strong>component</strong></p>
  
  <pre><code>@connectToStores
  export default class Dealers extends Component {
  
    static propTypes = {
      title : React.PropTypes.func,
    }
  
    static contextTypes = {
      router : React.PropTypes.func,
    }
  
    constructor (props) {
      super(props);
      this.state = {
        modal : false,
        dealerData : this.props.dealerData,
      }
    }
  
    componentWillMount () {
      GetDealersActions.getDealers();
      this.setState({
        dealerData : this.props.dealerData.dealersData,
      })
    }
  
    static getStores () {
      return [ GetDealersStore ];
    }
  
    static getPropsFromStores () {
      return {
        ...GetDealersStore.getState(),
      }
    }
  
    render () {
  
      return (&lt;div&gt;
            &lt;div style={Styles.mainCont}&gt;
              {!!this.props.dealerData ?
                this.props.dealerData.dealersData.map((dealer) =&gt; {
                  return (&lt;div&gt;HERE I AM RENDERING WHAT I NEED&lt;/div&gt;);
                }) : &lt;p&gt;Loading . . .&lt;/p&gt;
              }
            &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  
  }
  </code></pre>
  
  <p>as you can see in the component part I have this</p>
  
  <pre><code>  constructor (props) {
      super(props);
      this.state = {
        modal : false,
        dealerData : this.props.dealerData,
      }
    }
  
    componentWillMount () {
      GetDealersActions.getDealers();
      this.setState({
        dealerData : this.props.dealerData.dealersData,
      })
    }
  </code></pre>
  
  <p>which is telling me that <code>dealerData is undefined</code> or <code>can not read property of null</code>.</p>
  
  <p>All I need is to know a technique where I can fetch the data before the initial renders occurs. So I can filled out the <code>state</code> and the start working with that data.  </p>