从redux-store加载数据的最佳位置在哪里?

时间:2017-07-07 15:29:01

标签: javascript reactjs redux react-redux

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

在我的render方法中,我有另一个应该使用全局redux-state数据的组件。

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

如果我尝试在我的子组件构造函数或componentDidMount()方法中尝试console.log或将数据分配给var,我就不会按预期获取数据(我正在获得初始状态)。

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

我需要一点,我确信我有正确的数据。

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

渲染方法是最佳位置,一般来说,最佳做法是什么。感谢。

1 个答案:

答案 0 :(得分:2)

这里有几个问题。

关于加载数据的位置,componentDidMount确实是调用ajax方法和加载数据的正确位置,如facebook docs所示。

关于是否通过道具将这些数据传递给子组件,我喜欢在presentational vs container components上关注Dan Abramov(还原的作者)guid。简而言之,尝试使用容器组件来加载数据并完成所有逻辑,然后通过props将所需的任何内容传递给表示组件,如果可能的话,使它们成为纯函数。

就何时获得正确的数据而言,请查看上面的React生命周期文档。您会看到constructor点火,然后是componentWillMount,然后是render,然后是componentDidMount。因此,如果您的ajax调用获取componentDidMount中的数据,您将首先调用render,导致在已安装的组件上没有加载数据。大多数人通过放置一个微调器来解决这个问题,直到数据从ajax加载完毕为止。一个简单的if语句应该完成这个