CODEWITHSUNDEEP
ngrxngrx-storengrx-entity
userdac
userdac

Reputation: 60

NGRX: Composing state when we have to represent data from two lists

Practical example: Consider an expand/collapse list. Each item expands another list.

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

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

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

On the UI the list should be represented like this:

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

When the user clicks on the MainDomain[n] there is a call to the backend which returns a list of SubDomain[]. There are no connections between the two of them.

It seems that the most complicated part is that the SubDomains are being loaded one by one on click not all at once, and multiple MainDomains can be open at the same time like in the example above. Also, it should be possible to easily perform CRUD operations on the subDomainList entities.

I tried using a selector which selects an item from the state by id but every time the state is overridden.

My initial idea was to create a separate state in which after the SubDomainList[] is loaded successfully, then I could add the loaded SubDomainList[] by dispatching an 'ADD' action thus adding the entities and the id of the clicked MainDomainList in the newList state as the user clicks on through the list obtaining something like this:

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: [{}, {}]
                }
            }
        }
}

Then somehow i would get all the newList entities and match them in the UI with the id of the MainDomainList[n].id

Is my approach correct or is there any other better or less complicated solution for this issue?

I'm fairly new to the subject but I had a lot of headaches trying to figure out how to implement this with ngrx/Entity and failed so far, although it should be a pretty common case. Any help would be much appreciated.

Upvotes: 0

Views: 207

Answers (1)

rijin
rijin

Reputation: 1759

You can write selectors with argument by passing of main domain list

ref: ngrx parameter to select function and https://blog.angularindepth.com/ngrx-parameterized-selector-e3f610529f8

Upvotes: 2

Related Questions