title: React-router first fetch required data, then show current route's component
body: <p>What's the best way of making sure that my react app has all the data needed when I am using react router? Basically I want to fetch some basic data that are used across whole application, the problem is that when I did it "the easy way" some of my data are fetched twice.</p>
  
  <p>When I enter index route (Dashboard) it first mount this component and fire <code>this.props.fetchAllProjects()</code>, than it mount Loader component and fire <code>this.props.fetchUsersInfo()</code> so it shows just Spinner component and after user info data are fetched id again mount Dashboard and fire <code>this.props.fetchAllProjects()</code> is there any good way of doing this?
  Here's my current code:</p>
  
  <p>AppRouter.jsx</p>
  
  <pre><code>&lt;Router history={browserHistory}&gt;
  &lt;Route component={Loader}&gt;
      &lt;Route path="/" component={MainLayout}&gt;
          &lt;IndexRoute components={{ rightSidebar: RightSidebar, main: Dashboard }} /&gt;
          &lt;Route path="accounts" components={{ rightSidebar: RightSidebar, main: Accounts }} /&gt;
      &lt;/Route&gt;
  &lt;/Route&gt;
  &lt;Route path="*" component={PageNotFound} /&gt;
  </code></pre>
  
  <p></p>
  
  <p>Loader.jsx</p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  
  import { fetchUsersInfo } from 'actions/index.actions';
  import Spinner from 'components/spinner/Spinner.component';
  class Loader extends React.Component {
      componentDidMount() {
          this.props.fetchUsersInfo();
      }
  
      render() {
          return (
              &lt;div&gt;
                  {this.props.appState.isFetchingUsersInfo ?
                      &lt;div&gt;
                          &lt;Spinner /&gt;
                      &lt;/div&gt;
                      :
                      &lt;div&gt;
                          {this.props.children}
                      &lt;/div&gt;
                  }
              &lt;/div&gt;
          );
      }
  }
  
  Loader.propTypes = {
      children: React.PropTypes.node.isRequired,
      appState: React.PropTypes.shape({
          isFetchingUsersInfo: React.PropTypes.bool.isRequired,
      }),
      fetchUsersInfo: React.PropTypes.func.isRequired,
  };
  
  const mapStateToProps = state =&gt; ({
      appState: {
          isFetchingUsersInfo: state.appState.isFetchingUsersInfo,
      },
  });
  
  export default connect(mapStateToProps, { fetchUsersInfo })(Loader);
  </code></pre>
  
  <p>Dashboard.jsx</p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  
  import { fetchAllProjects } from 'actions/index.actions';
  
  import styles from './Dashboard.container.scss';
  
  class Dashboard extends React.Component {
      componentDidMount() {
          this.props.fetchAllProjects();
      }
      render() {
          return (
              &lt;div&gt;
              Dashboard
              &lt;/div&gt;
          );
      }
  }
  
  Dashboard.propTypes = {
      appState: React.PropTypes.shape({
          isFetchingProjects: React.PropTypes.bool.isRequired,
      }),
      fetchAllProjects: React.PropTypes.func.isRequired,
  };
  
  const mapStateToProps = state =&gt; ({
      appState: {
          isFetchingProjects: state.appState.isFetchingProjects,
      },
  });
  
  export default connect(mapStateToProps, { fetchAllProjects })(Dashboard);
  </code></pre>