Question

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

关于建立规范化状态的部分是有道理的。然后他继续谈谈你将如何创建一个选择器，这部分答案在下面引用，并显示他的代码块。

在你的逻辑或视图中（例如使用Angular），你需要你的嵌套结构，这样你就可以迭代你的数组，因此，你不想迭代ID字符串数组。相反，你喜欢actualContent：ActualContent [];。

为此，您创建一个选择器。每当您的商店发生变化时，您的选择器都会启动并生成一个新的＆＃34;视图＆＃34;您的原始数据。

// 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正在做什么，以及如何在想要显示blogContents与嵌套的actualContents列表的组件中使用它，这可以在稍微解释一下细节？

Answer 1

@cartant把我盯住了original question所以我在这里（thx @cartant！）。

我对应用程序中的界面有很多想法。我认为拥有定义良好的接口很重要，否则我们最终会陷入混乱:)。

我试图为它创建一个基本模式，因为我们经常会有同样的想法：

一种资源：
- 没有细节的资源
- 资料详情
- 组合资源，其中只有ID的外键被相应的资源替换 - 具有UI变量的组合资源（用于显示状态，例如提取，下载等）

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

我在angular-ngrx-starter，here for the interfaces内制作了一个详细的例子。

顺便说一句，你可能对whole folder感兴趣，这是一个完整的例子就是这个启动器（动作，减速器，效果，接口，选择器，服务和模拟服务）。

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

Answer 2

我的问题是，是否还有类型定义 BlogContent与一个嵌套的实际内容数组？

BlogContent仅包含actualContent的ID数组。

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

Maxime参考了他自己的项目，他做了类似的模式。

这是他的选择器：https://github.com/maxime1992/pizza-sync/blob/master/frontend/src/app/shared/states/orders/orders.selector.ts

然后他在这里使用它：https://github.com/maxime1992/pizza-sync/blob/b127ef963640d67f7560fad69f6f8364355ac697/frontend/src/app/features/order-summary-dialog/order-summary-dialog.component.ts

ngOnInit() {
    this.orderSummary$ = this.store$.let(getOrderSummary);
}

请注意，这是选择器的旧方法。 ngrx示例应用程序曾经使用它，但它们已经重构为所有选择器使用reselect.js。

这个ngrx选择器在做什么？

2 个答案: