NGRX：当我们必须从两个列表中表示数据时组合状态

Question

实际示例：考虑展开/折叠列表。每个项目扩展另一个列表。

export interface MainDomainList {
   id: number
   name: string;
}

export interface SubDomainList {
   id: number
   name: string;
}

export interface AppState {
    mainDomainList: MainDomainList[];
    subDomainList: SubDomainList[];
}

在 UI 上，列表应该这样表示：

MainDomainList[1]
   SubDomainList[] (entire list)
MainDomainList[2]
   Another SubDomainList[] (entire list)
etc..

当用户点击 MainDomain[n] 时，会调用后端返回 SubDomain[] 的列表。 两者之间没有任何联系。

似乎最复杂的部分是SubDomains在点击时不是一次全部加载，并且可以同时打开多个MainDomains 就像上面的例子一样。此外，应该可以轻松地对 subDomainList 实体执行 CRUD 操作。

我尝试使用一个选择器，它通过 id 从状态中选择一个项目，但每次状态都被覆盖。

我最初的想法是创建一个单独的状态，在成功加载 SubDomainList[] 之后，我可以通过调度“ADD”操作来添加加载的 SubDomainList[]，从而添加实体和单击的 MainDomainList 的 id处于 newList 状态，因为用户在列表中单击时会获得如下内容：

exportt interface AppState {
    mainDomainList: MainDomainList[];
    subDomainList: SubDomainList[];
    newList: NewList[];
}


{

        mainDomainList : { 
          entities: {
            md1: {
              id: 'md1',
              name: '1'
            },
            md2: {
              id: 'md2',
              name: '2'
            }
          }
        },
        subDomainList : {
          entities : {
            sd1 : {
              id : 'sd1',
              name: 'name1'
            },
            sd2 : {
              id : 'sd2',
              name: 'name2'
            }
        },
        newList : {
            entities : {
                md1 : {
                  id : 'md1',
                  subDomainList: [{}, {}]
                },
                md2 : {
                  id : 'md2',
                  subDomainList: [{}, {}]
                }
            }
        }
}

然后我会以某种方式获取所有 newList 实体并在 UI 中将它们与 MainDomainList[n].id 的 id 匹配

我的方法是正确的还是有其他更好或更简单的解决方案来解决这个问题？

我对这个主题还很陌生，但我很头疼，试图弄清楚如何用 ngrx/Entity 实现它，但到目前为止失败了，尽管这应该是一个很常见的情况。任何帮助将不胜感激。

Answer 1

您可以通过传递主域列表来编写带参数的选择器

参考：ngrx parameter to select function 和https://blog.angularindepth.com/ngrx-parameterized-selector-e3f610529f8