NGRX: состояние составления, когда нам нужно представить данные из двух списков

Практический пример: рассмотрим список развертывания / свертывания. Каждый элемент расширяет другой список.

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.

Я пробовал использовать селектор, который выбирает элемент из состояния по идентификатору, но каждый раз состояние переопределяется.

Моя первоначальная идея состояла в том, чтобы создать отдельное состояние, в котором после успешной загрузки SubDomainList [] я мог бы добавить загруженный SubDomainList [], отправив действие «ADD», таким образом добавив сущности и идентификатор выбранного MainDomainList в новый список состояние, когда пользователь щелкает по списку, получая что-то вроде этого:

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, и пока это не удалось, хотя это должно быть довольно распространенным случаем. Любая помощь приветствуется.


ngrx ngrx-store ngrx-entity
person userdac    schedule 04.01.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете писать селекторы с аргументом, передавая список основных доменов

ref: параметр ngrx для выбора функции и https://blog.angularindepth.com/ngrx-parameterized-selector-e3f610529f8

person rijin    schedule 04.01.2019
comment
Спасибо, что ответили на риджин. Насколько я понимаю, при использовании селектора путем передачи идентификатора для выбора состояния хранилища каждый раз, когда пользователь нажимает на элемент, селектор очищает и отменяет состояние. Разве мне не нужно иметь что-то инкрементное, например оператор addOne и создавать отдельное состояние, когда пользователь щелкает элементы в списке? Не могли бы вы рассказать подробнее об этом случае? Неправильно ли использовать описанный выше подход с оператором addOne? И почему? - person userdac; 04.01.2019