这个ngrx选择器在做什么? [英] What is this ngrx selector doing?

问题描述

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

I'm trying to better understand the answer by Maxime to this question. My rep is not high enough to comment on the answer there, so I'll ask a new question here.

关于设置标准化状态的部分是有意义的.然后他继续讨论如何创建选择器，下面引用了他的答案的这一部分，并显示了他的代码块.

The part about setting up a normalized state makes sense. Then he goes on to talk about how you would create a selector, this part of his answer is quoted below, and showing his code block.

在您的逻辑或视图(例如，使用Angular)中，您需要嵌套结构，以便可以迭代数组，因此，您不想迭代ID的字符串数组.相反，您需要actualContent:ActualContent [];.

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数组?

My question is, whether or not there is still a type definition of BlogContent with an actualContent array nested?

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

我不太了解选择器getBlogContents的功能，以及如何在希望显示带有realcontents嵌套列表的blogContents的组件中使用选择器，这可以更详细地说明吗?

I don't quite understand what the selector getBlogContents is doing and how this would be used in a component that wants to display blogContents with a nested list of actualContents, can this be explained in a little more detail?

推荐答案

@cartant在我的

@cartant pinged me on my original question so here I am (thx @cartant!).

我确实对应用程序中的界面进行了很多思考.我认为拥有定义良好的接口很重要，否则我们将陷入混乱:).

I do think a lot about my interfaces within an app. I think it's important to have well defined interfaces or we'll end up with a mess :).

我试图为它创建一个基本模式，通常，我们最终会得到相同的想法:

I've tried to create a basic pattern for it, as often, we end up with the same idea:

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

One resource:
- resource without details
- resource with details
- composed resource, where foreign keys with only IDs are replaced by corresponding resources
- composed resource with also UI variables (to show a state, for example fetching, downloading, etc)

一个表"，其中包含多个这些资源:
-包含标准化数据，例如byId和allIds
-包含一些UI变量，这次不是针对所有项目，而是表(例如，由于资源不在列表中，因此添加资源的状态会在那儿)

A "table", which contains multiple of those resources:
- contains normalized data, with for example byId and allIds
- contains some UI variables, this time not for every items, but the table (state for adding a resource would go there as the resource is not in the list yet for example)

我已经在angular-ngrx-starter，顺便说一句，您可能会对整个文件夹，这是一个完整的示例(启动器，操作，减速器，效果，界面，选择器，服务和该服务的模拟).

By the way, you might be interested by the whole folder, which is a complete example is this starter (actions, reducer, effects, interfaces ,selectors, service and mock for the service).

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

Hope it helps you understand but keep in mind that this is not perfect! It's just one way, my way of seeing things.

这篇关于这个ngrx选择器在做什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！