从Container中的服务器获取数据并将其传递给Component

Question

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

是）我有的：

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

我需要的：

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

我正在努力的方面：

如果我创建一个容器组件，我将使用mapStateToProps将电影从状态传递到我的<MoviesList />组件，但首先我需要从服务器获取它，所以我认为我应该在其中一个容器组件中执行它生命周期钩子，但是我会在我的movies和<MoviesListContainer />中有一个<MoviesList />道具（应该用PropTypes验证），这将迫使我在两个组件中编写一个大的道具验证，这看起来并不正确我。

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

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

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

感谢大家！

Answer 1

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

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

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

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

Answer 2

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