reactjs - 在react+redux中预加载组件数据的正确方法

Question

我不知道从 API 预加载数据以供组件使用的正确方法。

我编写了一个应呈现数据的无状态组件:

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 注入(inject)无状态组件并实现 componentWillMount 或类似的生命周期方法来加载数据 - 但随后我不需要通过 props 传递列表，因为组件总是会为自己加载数据，而且我不希望这样，因为每当创建新组件时，都会从 api 而不是存储中获取数据...

我看到的另一个建议是使用react-router中的getComponent函数，并在返回组件之前检索所有数据，但是，我不确定这是否是正确的redux方式，因为我不知道如何在那里使用 redux-thunk，而且当它只需要一个组件所需的数据时，逻辑似乎散布在所有文件中。

这给我留下了唯一看似不错的选项，可以在容器组件的生命周期方法中加载数据，但我想知道什么被认为是我想做的事情的最佳实践。

Answer 1

处理数据预加载的最“类似redux”的方法是在包装您的高阶组件的生命周期方法(可能是componentWillMount)中触发异步操作。应用程序。但是，您不会直接在该组件中使用 API 调用的结果 - 需要使用将其放入应用程序商店的 reducer 进行处理。这将要求您使用某种 thunk 中间件来处理异步操作。然后，您将使用 mapStateToProps 将其简单地传递给呈现数据的组件。

高阶组件:

const mapStateToProps = (state) => {
  return {
    departments: state.departments
  };
}

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({
    getDepartments: actionCreators.fetchDepartments
  });
}

class App extends Component {
  componentWillMount() {
    this.props.getDepartments();
  }

  render() {
    return <DepartmentsList departments={this.props.departments} />
  }
}

 export default connect(mapStateToProps, mapDispatchToProps)(App);

reducer :

export function departments(state = [], action) {
  switch(action.type) {
    case 'RECEIVE_DEPARTMENTS':
      return action.departments;
  }
}