React Router and Redux - Data on initial load

I have looked a lot of questions and answers on the site concerning an issue that I am experiencing.

I have the usual setup with React, React Router and Redux. My top level component is as follows.

// Imports

const reducers = {
  main: baseReducer,
  form: formReducer,
};

const reducer = combineReducers(reducers);

const store = createStore(
  reducer,
  applyMiddleware(thunk),
);

store.dispatch(actions.auth.setCurrentUser());
// store.dispatch(actions.api.fetchLineup());

ReactDOM.render(
  <Provider store={store}>
    <HashRouter>
      <App />
    </HashRouter>
  </Provider>
  ,
  document.getElementById('root')
);

Inside my App.jsx I have the following code:

import React from 'react';
import Main from './Main';

const App = () => (
  <div>
    <Main />
  </div>
);

export default App;

My Main.jsx

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import GroupingContainer from '../containers/Grouping';
import HomeContainer from '../containers/Home';

const Main = () => (
  <main>
    <Switch>
      <Route exact path='/' component={HomeContainer} />
      <Route path='/groupings/:id' component={GroupingContainer} />
    </Switch>
  </main>
);

export default Main;

And finally I have my Grouping.jsx and GroupingContainer.jsx

import React, { Component } from 'react';

function loadGrouping(props, groupingId) {
  const grouping = props.main.groupings.find(
    (g) => g.id === groupingId
  );
  if (!grouping) {
    props.dispatch(api.fetchGrouping(groupingId));
  }
}

class Grouping extends Component {
  constructor(props) {
    super(props);
    loadGrouping(props, props.groupingId);
  }

  componentWillReceiveProps(nextProps) {
    console.log('Next: ', nextProps);
    if (nextProps.match && nextProps.match.params.id !== this.props.match.params.id) {
      loadGrouping(this.props, nextProps.groupingId);
    }
  }

  render() {
    const grouping = this.props.main.groupings.find(
      (lg) => lg.id === this.props.groupingId
    );
    return (
      <div>
        <h1>{grouping.name}</h1>
      </div>
    );
  }
}

export default Grouping;

GroupingContainer.jsx

import { connect } from 'react-redux';
import Grouping from '../components/Grouping';

const mapStateToProps = (state, ownProps) => {
  return {
    groupingId: parseInt(ownProps.match.params.id, 10),
    ...state,
  };
};

const mapDispatchToProps = (dispatch) => ({
  dispatch,
});

const GroupingContainer = connect(
  mapStateToProps,
  mapDispatchToProps,
)(Grouping);

export default GroupingContainer;

After the request it fires another action that adds the returned grouping to the store and into an array of groups state.main.groups

I am having 2 problems. When I browse from the root path to one of the groupings, the following flow:

http://localhost:3000 -> http://localhost:3000/#/groupings/19

I receive the message: Uncaught TypeError: Cannot read property 'name' of undefined for a brief second until the API request finishes and populates the {grouping.name} and when I do a complete refresh of the page on a grouping URL http://localhost:3000/#/groupings/19 the application does not load at all and gives them same Uncaught TypeError: Cannot read property 'name' of undefined

I have been using React for around 2 months and have really started using API requests on Component loads. I can not really figure out where to place the API request properly to prevent the view rendering before it has finished and erroring out.

Any help would be appreciated!

Thanks!