angular - 这个 ngrx 选择器在做什么？

Question

我试图更好地理解 Maxime 对此 question 的回答.我的代表不够高，无法评论那里的答案，所以我会在这里问一个新问题。

关于设置规范化状态的部分很有意义。然后他继续谈论你将如何创建一个选择器，下面引用了他的这部分答案，并展示了他的代码块。

In your logic or view (for example with Angular), you need your nested structure so you can iterate over your array and thus, you don't want to iterate on a string array of IDs. Instead you'd like actualContent: ActualContent[];.

For that, you create a selector. Every time your store change, your selector will kicks in and generate a new "view" of your raw data.

// assuming that you can blogContentsState and actualContentsState from your store
const getBlogContents = (blogContentsState, actualContentsState) =>
  blogContentsState
    .allIds
    .map(blogContentId => ({
      ...blogContentsState.byId[blogContentId],

      actualContent: blogContentsState
        .byId[blogContentId]
        .actualContentIds
        .map(actualContentId => actualContentsState.byId[actualContentId])
   }));

我的问题是，是否还有 BlogContent 的类型定义，其中嵌套了一个 actualContent 数组？

export interface BlogContent {
  id: string;
  header: string;
  tags: string[];
  title: string;
  actualContent: ActualContent[]; <------ NESTED
}

我不太明白选择器 getBlogContents 是做什么的，以及如何在一个组件中使用它来显示带有嵌套的 actualContents 列表的 blogContents，这可以稍微解释一下吗更详细？

Answer 1

@cartant 在我的 original question 上 ping 我所以我来了(thx @cartant!)。

我确实对应用程序中的界面考虑了很多。我认为拥有定义良好的接口(interface)很重要，否则我们最终会搞得一团糟 :)。

我试图为它创建一个基本模式，我们经常以相同的想法结束:

一个资源:
- 没有细节的资源
- 资源详情
- 组合资源，其中只有 ID 的外键被相应的资源替换
- 包含 UI 变量的组合资源(显示状态，例如获取、下载等)

一个“表”，其中包含多个资源:
- 包含标准化数据，例如 byId 和 allIds
- 包含一些 UI 变量，这次不是针对每个项目，而是针对表格(例如，添加资源的状态会出现在列表中，因为资源还不在列表中)

我在angular-ngrx-starter中做了这么详细的例子，here for the interfaces .

顺便说一下，您可能对 whole folder 感兴趣，这是一个完整的例子是这个启动器( Action 、 reducer 、效果、接口(interface)、选择器、服务和服务的模拟)。

希望它能帮助您理解，但请记住，这并不完美!这只是一种方式，我看待事物的方式。