React Redux - 第一次渲染时状态未定义

Question

对于我的客户，我正在创建类似测验网络应用程序的东西，以基于具有巨大且非常独特的数据的 websockets (socket.io) 与 redux 做出反应。没有用户交互，只有表示层。它是这样工作的：我将带有 url 的 websocket 事件获取到我的布局和有效负载数据，然后我呈现给定的 url 并使用数据作为参数触发 redux 操作，这成为应用程序的状态。就那么简单。但是我注意到在第一次渲染时初始状态正在加载，不是从 websocket 给出的作为操作的参数。正如我所说，我得到的数据是巨大而独特的，所以我不想在 reducer 中声明这样的东西：

pageData: {
    assets: [],
    questions: [],
    details: []

等等。顺便说一句，它要复杂得多，它只是一个例子。
而不是我做了这样的事情：

pageData: {}

而且我希望在视图中（使用连接）我可以像这样获得这些数据：

this.props.view.pageData.questions

但后来发现我无法得到它，因为它在第一次渲染时未定义。所以我的问题是：

有没有办法在第一次渲染时访问这些数据而不用声明整个结构？
如果不是，我应该在 reducer 中重建给定的数据吗？
- 然后我是否应该为每个页面创建缩减器（有超过 20 个视图具有独特的数据）

当然我可以在reducer中声明一切，但我觉得维护这么多数据非常困难。
但是你知道，也许我太懒了，我应该为每个页面声明初始状态，这个问题没有意义;)。

Answer 1

我想你可能有几个选择：

如果 undefined
在收到数据之前不要呈现页面（或组件）
按照您的建议明确定义您的initialState

您的所有或大部分组件都期望或应该期望某种类型和某种格式的数据。因此，预先布置结构（#3）似乎是最合适的。问问自己：如果网络套接字事件数据的格式发生变化，我的应用程序是否仍能正确显示？

具体回答您的问题：

Is there a way to access to this data on first render without declaring whole structure?

是的，您可以在绑定中使用 || 运算符回退 (#1) 到空数组或对象或值。示例 <MyComponent listOfItems={this.props.items || []}。这有效地创建了一个空状态，但是，IMO 这应该在 reducer/store 和 initialState.

中标准化

Should I then create reducers for each page[?]

不一定是每个页面的缩减器，而是一个包含与您的应用程序相关的所有数据的存储区。在不了解您的应用程序架构的情况下很难做出肯定的判断，但保留小的、定义明确的信息块通常比保留一个大块更容易。

我强烈建议事先定义您的数据。一开始听起来可能很麻烦，但它会带来很大的回报，并帮助其他人了解使用实时数据的应用程序可能是什么样子。

Answer 2

那是因为你没有在 reducer 中添加 default case

default:
    return state;

React Redux - 第一次渲染时状态未定义

React Redux - state undefined on first render

reactjs

websocket

redux

react-redux

redux-thunk