title: How to indicate "loading" state for an async action during first render using redux
body: <p>Say I have a redux module that looks like this:</p>
  
  <pre><code>import fetch from 'isomorphic-fetch';
  
  // CONSTANTS
  const LOAD = 'LOAD';
  const LOAD_SUCCESS = 'LOAD_SUCCESS';
  
  // REDUCER
  const initialState = { loading: false, data: [] };
  
  export default function reducer(state = initialState, action) {
    switch (action.type) {
      case LOAD: return { ...state, loading: true };
      case LOAD_SUCCESS: return { ...state, loading: false, data: action.data };
      default: return state;
    }
  }
  
  // ACTION CREATORS
  function requestLocations() {
    return { type: LOAD };
  }
  
  function receiveLocations(json) {
    return { type: LOAD_SUCCESS, data: json };
  }
  
  export function fetchLocations() {
    return function (dispatch) {
      dispatch(requestLocations());
  
      return fetch('http://myurl')
        .then(response =&gt; response.json())
        .then(json =&gt; dispatch(receiveLocations(json)));
    };
  }
  </code></pre>
  
  <p>I'm struggling with the <code>loading</code> state on the first render if I make the async call in componentWillMount.  Imagine my component looks like this (simplified for brevity):</p>
  
  <pre><code>export default class LocationContainer extends React.Component {
    componentWillMount() {
      fetchLocations(); // already bound and injected via connect.
    }
  
    render() {
      const { loading, data } = this.props; // injected via connect from reducer above.
      if (loading) {
        return &lt;Spinner /&gt;;
      } else {
        return &lt;LocationExplorer locations={ data } /&gt;;
      }
    }
  }
  </code></pre>
  
  <p>The problem I run into is that on the first render of <code>LocationContainer</code>, <code>loading</code> is false and <code>data</code> hasn't been fetched yet.  In <code>componentWillMount</code>, the <code>LOAD</code> action is fired and a props change of <code>loading</code> being set to true is queued up to happen on the subsequent render.  In the meantime, during my first render, <code>LocationExplorer</code> is rendered when I really wanted <code>Spinner</code> instead because <code>loading</code> is still false. I'm wondering how you deal with this without setting a <code>firstRender = true</code> state variable hack.</p>