Question

我正在构建一个待办事项应用程序，其中包含待办事项列表，也可以包含子待办事项。在使用ngrx之前，我的模型如下所示：

export interface Todo {
  id: string;
  title: string;
  isDone?: boolean;
  parentId?: string;
  subTodos?: [Todo];
}

<todo *ngFor="let todo of todoss$|async">
  <todo *ngFor="let subTodo of todo.subTodos"></todo>
</todo>

这很方便在视图内显示数据，因为我可以使用嵌套的*ngFor来做到这一点。因为用于更新子任务的reducer逻辑有些复杂，所以我考虑使用实体。但是标准化数据似乎需要权衡取舍。现在，我不仅要过滤我的待办事项以从主列表中删除子任务，还必须查询每个SubTodo的数据。为了简化更新逻辑，似乎要进行大量计算。

模型现在看起来像这样：

export interface Todo {
  id: string;
  title: string;
  isDone?: boolean;
  parentId?: string;
  subTodos?: [string]; // an Todo.id
}

我阅读了很多有关ngrx的内容，但找不到任何具有这种数据结构的示例。我想知道您将如何解决这个问题？您是否总是规范化数组并拆分相关模型？如果是这样，您是在视图中使用数据时对数据进行非规范化还是在指定的组件中查找数据（对我来说这似乎很丑）？以及如何设计接口？您是否为视图模型和状态模型创建了两个单独的接口？

Answer 1

您应该仍然可以拥有与以前相同的视图模型。

选择器在这里发挥作用，它们可以将您的状态转换为最适合您的视图模型。

在设计ngrx状态时，对树结构化数据进行规范化/非规范化是否有意义？

1 个答案: