实际示例:考虑展开/折叠列表。每个项目扩展另一个列表。
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[],从而在 newList 中添加实体和单击的 MainDomainList 的 id当用户单击列表时的状态,获得如下内容:
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实现它,但到目前为止失败了,尽管它应该是一个很常见的情况。任何帮助将非常感激。