Question

对于我的客户，我创建了一些像quiz web app这样的东西，与基于websockets（socket.io）的redux做出反应，并提供了巨大的，非常独特的数据。没有用户交互，只是表示层。它的工作方式如下：我使用url获取websocket事件的布局和有效负载数据，然后我使用数据作为参数呈现给定的url和fire redux操作，这将成为应用程序的状态。就那么简单。但是我注意到，首先渲染初始状态是加载，而不是从websocket作为参数动作。正如我所说的那样，我得到的数据是巨大而独特的，所以我不想在reducer中声明这样的东西：

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

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

pageData: {}

我希望在视图上（使用连接）我可以得到这样的数据：

this.props.view.pageData.questions

然而事实证明我无法得到这个，因为它在第一次渲染时未定义。所以我的问题是：

有没有办法在没有第一次渲染的情况下访问这些数据宣告整个结构？
如果没有，我应该在reducer中重建给定的数据吗？
- 我应该为每个页面创建reducer（有超过20个视图有独特的数据）

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

Answer 1

我想你可能有几个选择：

如果undefined
在收到数据之前，请勿渲染您的页面（或组件）
按照您的建议明确定义initialState

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

具体回答您的问题：

有没有办法在没有第一次渲染的情况下访问这些数据宣布整个结构？

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

我应该为每个页面创建reducer [？]

不一定是每个页面的reducer，而是包含应用程序所有相关数据的商店。如果不了解更多关于应用程序的体系结构，很难肯定地说，但保留小的，明确定义的信息块通常比一个大blob更容易。

我强烈主张事先定义您的数据。一开始可能听起来很麻烦，但它会带来很大回报，并帮助其他人了解应用程序在实时数据中的外观。

Answer 2

那是因为您尚未在reducer中添加默认大小写

default:
    return state;

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

2 个答案: