NgRx store for lists and detail data objects

Question

I'm very new to NgRx and am trying to wrap my head around it. I understand the objective is to have a data store where different types of state reside. I'm trying to understand how to work with lists of data.

Scenario 1: user first navigates to a list in which case an effect fires to retrieve list from backend/API. On success, the list is saved to the store and the UI component responds to the observable via | async and renders the list. The user clicks on an item to view the detail. We can either store the selected item's Id in the store then simply use a filter mechanism to retrieve the detail data from the list array in the store. Or, we can make another effect call to server for detail payload. I'm assuming the decision point here is if the list contains all of the data needed for the details page?

Scenario 2: assuming the list in the store contains all of the data required for the detail page and user clicking on an item in the list simply saves the selected item's id to the store then navigates to the detail page where the detail data is simply filtered from the list based on the selected item id in the store, what happens when the user refreshes the browser URL on the detail page? When this happens, the list is no longer in the store and neither is the selected item's id. However, the selected item's id is in the URL and route. How do you handle this scenario? Do you rebuild the list in order to retrieve the detail record?

Scenario 3: what's the best approach for handling a scenario where you have different subsets of data from the entire list. Perhaps you need to see a list of items that are 'pending' and another list of items that have been created this week, etc. It seems very inefficient to download all records into the store as the master list then simply filter out the ones needed for different views. I've read tutorials where you have the master list in store then simply have Ids in another part of the store that make up the different slices. This seems very heavy and a duplication of the database onto the client. What is the best approach for having filtered lists within a store?

Thanks for your help and insight.

Answer 1

Scenario 1: You're spot on!

Scenario 2: It depends.

• you can store the data in localStorage for example
• the list has to be fetched via the backend API

Scenario 3: keeping your state normalized is key here (you'll work with IDs). Also we don't have to load all entities at once, this can be done partially. The redux docs has a performance section that you can read.