为React状态和UI数据设计（TypeScript / Flow）类型

Question

让我们说一个应用围绕两个关键实体：

• 个人
• 组

一个小组可以包含许多个人。个人可以属于许多组。清晰的多对多关系。

对于React应用，建议normalise the state shape。因此，在该状态下，两个实体彼此分开生活。另一方面，UI会显示组列表及其相应的个人，反之亦然。这需要非规范化的表示形式，其中每个实体都包含另一种类型的列表。

设计此应用程序的（TypeScript / Flow）类型的最明智的方法是什么？我至少可以想到三个选择：

1. 为状态和UI使用相同的类型，例如类型Group获取一个可选的individuals?: Individual[]字段，该字段根据使用该类型的上下文进行设置
2. 创建规范化和非规范化版本-例如Group（规范化，在状态存储中使用）和GroupUI（非规范化，从Group和Individual[]构建，在UI中使用）
3. 完全分开的状态和UI类型，确保它们彼此不依赖，让它们位于单独的文件中，等等。

处理此问题的推荐方法是什么？优点/缺点？