Angular NGF中用于表示的Redux规范化树

我正处于应用程序设计阶段。它将是Angular4应用程序，使用Redux。我读了很多关于状态树规范化的书，我对视图中状态的表示数据有点怀疑

从一开始：

我必须为用户提供可消耗组列表。对于组，我必须调用API。API返回组的数组，例如：

[
  {
    "id": 1,
    "name": "name1",
    "type": "GROUP"
  },
  {
    "id": 2,
    "name": "name2",
    "type": "GROUP"
  },
  ...
]

我知道，我应该以这种方式将这些数据存储在状态树中：

groups: {
  byId: {
    1: {
      "id": 1,
      "name": "name1",
      "type": "GROUP"
    },
    2: {
      "id": 2,
      "name": "name2",
      "type": "GROUP"
    }
  },
  allIds: [1, 2]
}

我想如果我想在*ngFor循环中显示此数据，它将如下所示：

<ul>
  <li *ngFor="let groupId of (groups | async).allIds"> {{ (groups | async).byId[groupId].name }} </li>
</ul>

还有我的问题： 如何呈现这些数据

<div>
  <div *ngFor="let groupId of (groups | async).allIds">
    {{ (groups | async).byId[groupId].name }}
    <div *ngFor="let childId of (groups | async).byId[groupId].childs"> {{ (childs | async).byId[childId].name }} </div>
  </div>
</div>

{{（groups | async）.byId[groupId].name}
{{（childs | async）.byId[childId].name}

我的思维方式好吗？如果更改状态中的子元素（名称f.e），html视图是否会自动更改？同样的问题也适用于组更改。我希望在长期执行之后避免失败。这里需要标准化吗

<div>
  <div *ngFor="let groupId of (groups | async).allIds">
    {{ (groups | async).byId[groupId].name }}
    <div *ngFor="let childId of (groups | async).byId[groupId].childs"> {{ (childs | async).byId[childId].name }} </div>
  </div>
</div>