具有部分和完整资源加载的规范化状态

Question

我正在尝试规范化我的状态，但不太清楚如何处理部分和完整资源，即它们是否应该共享相同的状态片或降级到它们自己的片中。

更多信息：

当我请求 things 的列表时，服务器以部分列表作为响应。

[ { id: 1, name: "thing1"},
  { id: 2, name: "thing2"},
  ...
  { id: N, name: "thingN"} ]

当我对单个 thing 发出请求时，服务器以更完整的对象进行响应。

{ 
  id: 1, 
  name: "thing1",
  img_url: "url1",
  description: "description1",
  ... and more fields
}

部分列表和详细信息需要同时存在

那么这些部分的和完整的things应该都处于同一个状态片吗？

如果是，管理给定 thing 是否已部分或全部获取的最佳做法是什么？

感谢您的帮助！

Answer 1

获取单个项目的目的是什么？应该是显示吧？为什么不像这样设置你的状态：

this.state = {
  allThings: [],
  singleThing: {}
};

并相应地填写。

Answer 2

您可以通过以下几种方式解决此问题：

有一个像这样的不完整对象：
```
{
  id: 1,
  name: 'thing1',
  detail: null //this would be a JS object when populated
}
```
如何使用它：在使用详细信息视图的组件中，检查状态是否为空。这意味着如果您将来需要多个详细信息，您可以延迟加载详细信息，并且在需要时不必再次检索它们。但是，如果需要更新信息，这就不太好了（您必须同时解析 null 和上次检索日期，创建陈旧数据可能会有风险）。
在您的状态下将这两个节点作为完全不同的节点进行管理，其中详细视图是一个数组或只是一个单一对象。如果您希望始终在生命周期事件上更新对象（例如，在组件安装上您始终希望刷新数据），这种方法会更好。

我个人的偏好是 #1 - 我经常使用 Firebase，这非常有效，因为实时数据库会处理何时应该更新数据，然后让它们处于状态意味着我可以超快地显示数据用户（如果已预加载）。

Normalized State with Partial and Complete Resource Loading