React / Redux:导航到详细信息视图时的单一真相来源

Question

我有一个关于react和redux的架构/最佳实践问题。

我使用redux中间件查询graphql服务，并将结果在道具中向连接的组件公开。graphql的优点之一是能够使用其查询格式只检索所需的信息。

我有一个列出实体的页面，当您单击特定实体时，会得到一个视图实体详细信息页，其中包含查询字符串中的id。

我希望状态中的实体数组成为我唯一的真实来源，并希望有一个selectedEntityId属性作为对实体列表的查找。

我的问题是，列表页面中的实体列表只是名称和描述，而视图页包含了更多的信息。

我能想到的解决方案：

1)检索列表页(和视图页)中的所有实体信息(不仅仅是名称和描述)。问题是，我会在列表页面上查询一些我不需要的信息，这违背了graphql的思想。

2)在我的状态上有两个属性。一个将包含只有名称和描述的实体，而另一个属性将包含一个包含更多信息的实体列表。这个解决方案的问题是，我有两个单一的真理来源。

3)我可以将两个实体列表“结合”，因此，如果我从一个列表导航到一个视图页面，我可以用从视图页面获得的实体(除了名称和描述之外还有更多属性的实体)填充我已经拥有的实体列表，并使用该列表作为我唯一的真实来源。这似乎是最好的解决方案，但我不知道一个干净的方法来做到这一点。

有人能说明一下情况吗？

谢谢!

Answer 1

我不确定这是否是最好的，但根据你的解决方案，我会说第三个工作正常。

您可以尝试向每个列表项添加一个新值，以标识特定项是否包含所有详细信息。

想象一下商店是这样的：

items: {
  id1: {
    isFull: false,
    title: 'Item 1',
    id: 'id1'
  },
  id2: {
    isFull: true,
    title: 'Item 2',
    id: 'id2',
    description: '..',
    lorem: '',
    ...
  }
}

然后在details页面中获取isFull，并在出现false的情况下进行提取。