NgRx + Entities + Firestore - how to deal with it when I don't want to load all entities at once?

Question

Let's say that there are tasks and projects. Sometimes a user want to see all his/her tasks and sometimes tasks belonging to a certain project. When all tasks are loaded at the beginning all those different views may just use NgRx selectors to get what is necessary from task entities collection (at the same time NgRx effect + Firestore stateChanges will take care of the updates).

However if I don't want to load all tasks at the beginning (because there are just too many of them) how I should approach the problem?

Should I only store in task entity collection only "the current view's list" and empty it when user switches to a different one?

Should I load what is necessary for the current, append it to task entity collection and use selectors? However in this way I'm not sure how to deal with updates (as I guess that listening on stateChanges on all prevoius queries may be a bit overkill).

Are there any better alternatives?

Answer 1

There is probably no right or wrong answer here but here is how we do it:

• Have a entities list and append new entities to the list when they need to be loaded
• The same list can also update entities when needed (@ngrx/entities upsertMany makes this easy)
• Have a "current list" which stores the visible entities ID's
• Have a selector to select the current entities based on the visible entities ID's

The state looks as follows:

{
   entities: {...},
   entitiesById: {...},
   visibleEntitiesIds: {...}
}