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

Question

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

我的 reducer 中有defaultState

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

默认情况下dataArray为空。 我有 reducer 和 Action 。在 componentDidMount 方法中，我通过分派(dispatch)一些操作从服务器获取数据。 如果我刷新页面，则列出 24 小时内最后一项的默认页面为空，因为 dataArry 来 self 的 reducer 中的 defaultState。但是，如果我更改页面以列出过去 3 天的数据，那么 componentWillReceiveProps 就会起作用，并且在这个方法中我会获取数据，它会减少我的状态并返回新的状态

dataArray = [{some data}]

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

Answer 1

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

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

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

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

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