从容器中的服务器获取数据并将其传递给组件答案

【问题标题】：Fetching data from server in Container and passing it to Component从容器中的服务器获取数据并将其传递给组件
【发布时间】：2017-12-27 22:45:03
【问题描述】：

过去几周我一直在学习 React，我正在努力寻找一种从服务器获取数据集合并使用 Redux 呈现的方法。

我有什么：

我有一个<MoviesList /> 组件，它在其中呈现<Movie /> 组件的列表。

我需要什么：

我需要从服务器获取这些电影并将其存储在我的状态中。

我正在努力解决的问题：

如果我创建一个容器组件，我将使用 mapStateToProps 将电影从状态传递到我的 <MoviesList /> 组件，但首先我需要从服务器获取它，所以我认为我应该在容器组件的生命周期钩子之一，但随后我的<MoviesListContainer /> 和<MoviesList /> 中都有一个movies 道具（应该使用PropTypes 验证），这将迫使我在两者中都编写一个大道具验证组件，这对我来说根本不合适。

如果我只是使用函数组件在容器中传播道具，这不会有问题，但是由于我需要在生命周期钩子中获取电影，所以它需要是一个类，我需要指定两个文件中的道具。

那么实现这一目标的最佳方法是什么？

我应该在不同的地方获取这些电影吗？我应该采取不同的方法来获取它并避免这些重复吗？或者也许我真的应该在这两个文件中进行验证？

谢谢大家！

【问题讨论】：

标签： reactjs redux react-router

【解决方案1】：

我过去所做的是拥有一个在componentDidMount生命周期事件中调用的函数属性：

componentDidMount() {
    this.props.onMount();
}

该属性在容器中使用 mapDispatchToProps 映射到 thunk 或其他异步操作（请参阅 the Async Actions documentation）。

有关更复杂的替代方案，请参阅Redux First Router，它允许从路由器分派异步操作。

【讨论】：

【解决方案2】：

@JCE 是对的，您需要查看Async Actions。如果您想在将数据传递给组件之前获取数据并将其存储在 Redux 中，则必须使用副作用库（redux-thunks、redux-sagas 等）。原因是 Redux 操作本质上是同步的，而获取 API 是异步操作。副作用库将帮助您实现这一目标。

【讨论】：