如何在首次渲染之前在Redux中獲取數據並將其設置為默認狀態

Question

我有下拉過濾器，以按日期顯示項目，例如，顯示過去24小時的數據，顯示過去3天的數據。

我的reducer中有defaultState

const defaultState = {
  dataArray: [],
  a: true,
  b: false
}

默認情況下， dataArray為空。 而且我有減速器和動作。 在componentDidMount方法中，我通過調度一些操作從服務器獲取數據。 如果刷新頁面，則列出最后24小時的項目的默認頁面為空，因為dataArry來自我的reducer中的defaultState。 但是，如果我更改頁面以列出最近三天的數據，則componentWillReceiveProps可以正常工作，並且在此方法中，我可以獲取數據，它會減少狀態並返回帶有

dataArray = [{some data}]

如何獲取數據並將其設置為刷新頁面后呈現的狀態？

Answer 1

向defaultState添加一個“加載”變量，並將其初始化為true。 數據獲取完成后，將其設置為false。

在您的組件中檢查此變量。 如果為true，則顯示微調框和/或加載消息，否則顯示數據。

除此之外，每次您開始提取之前，都要在提取之前觸發一個名為“ FETCH_START”的操作，該操作會將加載變量設置為true。

如果獲取時出錯，則可以將另一個狀態變量設置為錯誤消息。 該變量將被初始化（每次您開始獲取）為空字符串。 如果加載完成，則可以檢查此錯誤變量，如果有錯誤，則顯示錯誤消息，而不是顯示數據。

此過程對於各種情況（例如身份驗證等）很有用。

Answer 2

Yossi的答案很明確。 我只是想更進一步，並提到您還可以通過了解何時獲取數據來增強用戶的體驗。 例如，如果您在登錄頁面上並且知道大多數用戶將要瀏覽您的商店，則在什么都沒有發生的情況下開始在登錄頁面上獲取該數據。

為此，請看一下： Google Dev的requestIdleCallback（）