在一個反應​​性的js/redux應用程序中設置默認狀態

Question

在我當前的ReactJS組件中，我必須調用一個REST API並獲取JSON。它在componentWillMount完成。

我已經在我的應用程序中引入了Redux。我應該在哪裏打電話來獲取JSON並設置爲默認狀態？它在Redux或我的反應的應用程序？

任何例子讚賞。

Answer 1

通常的做法是使用configureStore.js文件導出處理存儲設置（初始狀態，中間件和增強器）並返回存儲的configureStore()函數。有關這方面的示例，請參閱"real-world" example in the redux repo。

對於您的情況，一種簡單的方法是在您的應用程序啓動時從您的REST API請求數據，然後當您收到響應時，請撥打configureStore(initialState)（其中initialState是您提取的數據），然後繼續其餘的應用程序設置和初始渲染。儘管這種方法會爲您的應用程序啓動添加一點時間，因爲它的初始化將在它等待該API響應時暫停。

另一種選擇是隻創建你的商店（不需要先決條件的API提取），然後在你的商店創建完成後，從你的API發出實際的初始狀態請求。當收到該API響應時，您可以分派一個INITIAL_STATE操作，並讓Reducer準備好處理這個操作。在這種方法中，您可能需要在初始抓取過程中使用某種加載指示器，因爲您的應用將在API請求期間呈現或至少開始呈現。

如果您正在進行服務器渲染，則只需從服務器端獲取初始狀態數據，然後將其附加到要渲染的index.html的window對象。有關此示例，請參閱"universal" example in the redux repo。這將允許您簡單地grab your initial state from the window object when you create your store。

Answer 2

您通常會想要從componentDidMount（或Will，取決於您的生命週期約束）派發操作。該行動將啓動XHR，並通常返回thunk（redux-thunk）或promise（redux-promise-middleware）。如果是thunk，它將被設置爲用結果分派另一個操作，或者用它爲你做的承諾，然後按照正常方式減少該狀態並將其綁定到組件。