如何在首次渲染之前在Redux中获取数据并将其设置为默认状态

Question

我有一个下拉过滤器，可以按日期显示项目，例如，显示过去24小时的数据，显示过去3天的数据。

我的reducer中有defaultState

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

默认情况下，dataArray为空。 而且我有减速器和动作。在componentDidMount方法中，我通过调度一些操作从服务器获取数据。 如果刷新页面，则列出最后24个项目的默认页面为空，因为dataArry来自我的reducer中的defaultState。但是，如果我更改页面以列出最近3天的数据，则componentWillReceiveProps可以正常工作，并且在此方法内，我可以获取数据并减少状态并使用

返回新状态

dataArray = [{some data}]

如何在刷新页面后获取数据并将其设置为呈现状态？

Answer 1

向defaultState添加一个'loading'变量并将其初始化为true。数据获取完成后，将其设置为false。

在组件中检查此变量。如果为true，则显示微调框和/或加载消息，否则显示数据。

除此之外，每次开始提取之前，请在提取之前触发一个名为“ FETCH_START”的操作，该操作会将加载变量设置为true。

如果获取时出错，则可以将另一个状态变量设置为错误消息。该变量将被初始化（每次您开始获取）为空字符串。如果加载完成，则可以检查此错误变量，如果有错误，则显示错误消息，而不是显示数据。

此过程对于各种情况（例如身份验证等）很有用。

Answer 2

Yossi的答案很明确。我只想更进一步，并提到您还可以通过了解何时来获取数据来增强用户的体验。例如，如果您在登录页面上并且知道大多数用户将要浏览您的商店，那么在什么都没有发生的情况下，开始在登录页面上获取该数据。

与此同时，请看以下内容：Google Dev's requestIdleCallback()