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

Posted 2023-02-16

【中文标题】React Redux - 第一次渲染时状态未定义

【英文标题】：React Redux - state undefined on first render

【发布时间】：2017-04-17 21:10:37

【问题描述】：

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

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

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

pageData: 

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

this.props.view.pageData.questions

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

有没有办法在第一次渲染时访问这些数据而无需 声明整个结构？

如果不是，我应该在 reducer 中重建给定的数据吗？

然后我应该为每个页面创建减速器吗（大约有 20 多个视图 具有独特的数据）

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

【问题讨论】：

你可以为你的 redux store 指定一个 initialState。

【参考方案1】：

我想你可能有几个选择：

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

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

具体回答您的问题：

有没有办法在第一次渲染时访问这些数据而无需 声明整个结构？

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

然后我应该为每个页面创建 reducer[?]

不一定是每个页面的 reducer，而是包含所有与您的应用程序相关的数据的存储。如果不了解应用程序架构的更多信息，很难确定，但保留小而明确的信息块通常比一个大块更容易。

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

【参考方案2】：

那是因为你没有在 reducer 中添加默认大小写

default:
    return state;