從redux-store加載數據的最佳位置在哪里？

Question

我在我的父React組件中使用componentDidMount（）方法來從API提取一些數據，然后將其保存在redux-state中。

在我的render方法中，我還有另一個組件應該使用全局redux狀態的數據。

我可以通過道具將數據發送到子組件，也可以使用mapStateToProps（）加載它們。

如果我嘗試console.log或從子組件構造函數中的props或componentDidMount（）方法中的props分配數據到var，則我的數據得不到預期（我正在獲取初始狀態）。

我的render方法中的Console.log將在第一次渲染時顯示初始狀態，在第二次渲染時將顯示正確的數據。

我需要確定我有正確數據的地方。

...其中var a = this.props.somethingFromState; 將正確分配。

一般來說，渲染方法是最好的地方，什么是最佳實踐。 謝謝。

Answer 1

這里有幾個問題。

關於在哪里加載數據， componentDidMount實際上是調用ajax方法和加載數據的正確位置，如facebook docs所建議。

關於是否要通過props將該數據傳遞給子組件的方面，我喜歡遵循Dan Abramov（redux的作者）關於外觀組件和容器組件的指導 。 簡而言之，請嘗試使用一個容器組件來加載您的數據並執行所有邏輯，然后將所有必要的東西通過props傳遞給表示性組件，並盡可能使它們成為純函數。

關於何時將獲得正確的數據，請查看上面的React生命周期文檔。 您將看到constructor觸發，然后是componentWillMount ，然后是render ，然后是componentDidMount 。 因此，如果您的Ajax調用在componentDidMount獲取了數據，則將首先調用render ，導致沒有數據加載到已安裝的組件上。 大多數人通過放置微調器直到數據從ajax完成加載來解決此問題。 一個簡單的if語句就可以做到這一點