React / Redux:进入详细信息视图时的单一事实来源

时间:2018-11-01 17:59:45

标签: redux react-redux

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

我正在使用Redux中间件来查询graphql服务,并将props中的结果公开给连接的组件。 graphql的优点之一是能够使用其查询格式仅检索您需要的信息。

我有一个列出实体的页面,当您单击特定的实体时,您将获得一个视图实体详细信息页面,该页面的ID在查询字符串中。

我希望状态中的实体数组成为我的唯一事实来源,并希望selectedEntityId属性用作对该实体列表的查找。

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

我能想到的解决方案:

1)在列表页面(和查看页面)中检索所有实体信息(不仅仅是名称和描述)。问题是我将在列表页面上查询大量不需要的信息,这与graphql的想法背道而驰。

2)我的状态有2个属性。一个将仅包含名称和描述的实体,而另一个属性将包含具有更多信息的实体的列表。这种解决方案的问题是我有两个单一的事实来源。

3)我可以将2个实体列表“结婚”,因此,如果我从列表导航到视图页面,则可以将列表页面中已有的实体列表与从视图页面获得的实体一起饱和(除了名称和描述之外,还有更多属性的实体),并将该列表用作我的唯一事实来源。这似乎是最好的解决方案,但我不知道一种干净的方法。

有人能说明情况吗?

谢谢!

1 个答案:

答案 0 :(得分:0)

我不确定这是否是最好的选择,但是根据您的解决方案,我认为第三个方法可以正常工作。

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

想象一下这样的商店:

isFull

然后在详细信息页面中获取{{1}}并在错误的情况下获取。