我编写了一个无状态组件,它应该呈现数据：

import React,{ PropTypes } from 'react';

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

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

export default DepartmentsList;

我有一个动作可以从API中检索数据：

import { getDepartments } from '../api/tiMetable';

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

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

export function fetchDepartments() {
  return dispatch => {
    dispatch(requestDepartments);
    getDepartments()
      .then(departments => dispatch(
        receiveDepartments(departments)
      ))
      .catch(console.log);
  };
}

现在我想我有几个选项来预加载列表所需的部门.我可以使用redux-thunk和mapDispatchToProps将fetchDepartments注入无状态组件并实现componentWillMount或类似的生命周期方法来加载数据 – 但是我不需要通过props传递列表,因为组件总是为自己加载数据,我不希望这样,因为每当创建一个新组件时,数据都是从api而不是store中获取的……

我看到的另一个建议是使用来自react-router的getComponent函数,并在返回组件之前检索所有数据,但是,我不确定它是否是正确的redux方式,因为我没有看到如何使用redux-thunk在那里,当文件只是一个组件所需的数据时,逻辑类似于所有文件.

这让我看到了在容器组件的生命周期方法中加载数据的唯一看似正常的选项,但我想知道什么是我想要做的最佳实践.