Практический пример: рассмотрим развёртывание / сворачивание списка.Каждый элемент расширяет свой список.
export interface MainDomainList {
id: number
name: string;
}
export interface SubDomainList {
id: number
name: string;
}
export interface AppState {
mainDomainList: MainDomainList[];
subDomainList: SubDomainList[];
}
В интерфейсе пользователя список должен быть представлен следующим образом:
MainDomainList[1]
SubDomainList[] (entire list)
MainDomainList[2]
Another SubDomainList[] (entire list)
etc..
Когда пользователь нажимает на MainDomain [n], происходит вызовбэкэнд, который возвращает список SubDomain []. Нет связи между ними.
Кажется, что самая сложная часть в том, что субдомены загружаются один за другим, а не все сразу и несколько главных доменов могут быть открыты одновременно , как в примере выше.Кроме того, должна быть возможность легко выполнять операции CRUD для объектов subDomainList.
Я пытался использовать селектор, который выбирает элемент из состояния по id, но каждый раз, когда состояние переопределяется.
Моя первоначальная идея состояла в том, чтобы создать отдельное состояние, в котором после успешной загрузки SubDomainList [] я мог бы добавить загруженный SubDomainList [], отправив действие «ADD», добавив, таким образом, сущности и идентификатор выбранного MainDomainList в 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 и сопоставлю их в пользовательском интерфейсе с идентификатором MainDomainList [n] .id
Правильно ли подходит мой подход или есть какое-то другое более или менее сложное решение для этой проблемы?
Я довольно новичок в этом вопросе, но у меня было много головных болей, пытающихся понять, какреализовать это с помощью ngrx / Entity и до сих пор не удалось, хотя это должно быть довольно распространенным случаем.Любая помощь будет высоко ценится.