Correct way to pre-load component data in react+redux
<p>I do not know the correct way to pre-load data from API for a component to use.</p>

<p>I have written a stateless component which should render the data:</p>

<pre><code>import React, { PropTypes } from 'react';

const DepartmentsList = ({ departments }) =&gt; {
  const listItems = departments.map((department) =&gt; (
    &lt;li&gt;&lt;a href="./{department}"&gt;{department.title}&lt;/a&gt;&lt;/li&gt;
  ));
  return (
    &lt;ul&gt;
      {listItems}
    &lt;/ul&gt;
  );
};

DepartmentsList.propTypes = {
  departments: PropTypes.array.isRequired
};

export default DepartmentsList;
</code></pre>

<p>And I have an action which will retreive data from the API:</p>

<pre><code>import { getDepartments } from '../api/timetable';

export const REQUEST_DEPARTMENTS = 'REQUEST_DEPARTMENTS';
export const RECEIVE_DEPARTMENTS = 'RECEIVE_DEPARTMENTS';

const requestDepartments = () =&gt; ({ type: REQUEST_DEPARTMENTS });
const receiveDepartments = (departments) =&gt; ({ type: RECEIVE_DEPARTMENTS, departments });

export function fetchDepartments() {
  return dispatch =&gt; {
    dispatch(requestDepartments);
    getDepartments()
      .then(departments =&gt; dispatch(
        receiveDepartments(departments)
      ))
      .catch(console.log);
  };
}
</code></pre>

<p>Now I think I have a few options to preload departments that are required for the list. I could use <code>redux-thunk</code> and <code>mapDispatchToProps</code> to inject fetchDepartments to the stateless component and implement <code>componentWillMount</code> or similar lifecycle method, to load data - but then I don't need to pass the list via props, as the component would always load data for himself, and I don't want that, because whenever a new component is created the data is fetched from api instead of store...</p>

<p>Another advice I've seen is to use <code>getComponent</code> function from react-router, and retreive all data before returning the component, however, I am not sure if it's the correct redux way, as I don't see how to use redux-thunk there, and logic kind of seems littered all accross the files, when it's the data required for only one component.</p>

<p>This leaves me with the only seemingly ok option to load data in container component's lifecycle methods, but I want to know what is considered the best practice for what I want to do.</p>