title: Correct way to pre-load component data in react+redux
body: <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>