从 redux 存储加载数据的最佳位置在哪里?



我在父 React 组件中使用 componentDidMount(( 方法从 API 获取一些数据,然后以 redux-state 保存。

在我的渲染方法中,我有另一个组件,它应该使用来自全局 redux 状态的数据。

我可以通过 props 将数据发送到我的子组件,或者我可以使用 mapStateToProps(( 加载它们。

如果我尝试控制台.log或将数据从子组件构造函数或 componentDidMount(( 方法中的 props 分配给 var,我没有按预期获得数据(我正在获得初始状态(。

控制台.log在我的渲染方法中,第一次渲染时会显示初始状态,第二次渲染时会显示正确的数据。

我需要确定我有正确数据的点。

。其中 var a = this.props.somethingFromState;将正确分配。

渲染方法是否最佳位置以及通常执行此操作的最佳实践是什么。谢谢。

这里有几个问题。

关于在哪里加载数据,componentDidMount确实是调用ajax方法和加载数据的正确位置,正如facebook文档所建议的那样。

至于是否通过 props 将数据传递给子组件,我喜欢遵循 Dan Abramov(redux 的作者(关于表示与容器组件的指导。简而言之,尝试拥有一个容器组件来加载您的数据并执行所有逻辑,然后通过 props 将任何必要的内容传递给表示组件,如果可能的话,使它们成为纯函数。

关于何时获得正确的数据,请查看上面的 React 生命周期文档。您将看到constructor触发,然后componentWillMount,然后render,然后componentDidMount。因此,如果您的 ajax 调用在componentDidMount中获取数据,您将首先调用render,导致在已经挂载的组件上加载任何数据。大多数人通过放置微调器来解决此问题,直到数据从 ajax 完成加载。一个简单的 if 语句应该可以完成此操作

最新更新