Question

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

我有什么：

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

我需要什么：

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

我挣扎的是：

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

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

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

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

谢谢大家！

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是异步操作。副作用库将帮助您实现这一目标。

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

2 个答案: