Question

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

从头开始：

我必须提供用户可消费的群组列表。对于组我必须调用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>

对我来说这很好（我希望我能理解它）。

第二步：

但是每个小组都有一个子列表。由于数据量很大，点击该组后，某些组的子项将从API加载。

因此，在两个组中单击两次后，状态树可能如下所示：

  groups: {
    byId: {
      1: {
        "id": 1,
        "name": "name1",
        "type": "GROUP",
        "childs": [ 1, 3, 4 ]
      },
      2: {
        "id": 2,
        "name": "name2",
        "type": "GROUP",
        "childs": [ 2, 5 ]
      }
    },
    "allIds": [ 1, 2 ]
  },
  childs: {
    byId: {
      1: {
        "id": 1,
        "name": "item1",
        "type": "CHILD"
      },
      2: {
        "id": 2,
        "name": "item2",
        "type": "CHILD"
      },
      3: {
        "id": 3,
        "name": "item3",
        "type": "CHILD"
      },
      4: {
        "id": 4,
        "name": "item4",
        "type": "CHILD"
      },
      5: {
        "id": 5,
        "name": "item5",
        "type": "CHILD"
      }
    },
    "allIds": [ 1, 2, 3, 4, 5 ]
  }

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

<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>

我的思维方式好吗？如果在状态下更改子元素（名称f.e），html视图会自动更改吗？同样的问题适用于群组变更。经过长期的实施，我希望避免失败。这里需要归一化吗？

在ngFor演示文稿中Redux规范化树

0 个答案: