angular ngrx/store when and how to load data

Question

I'm quite new to the whole redux pattern. I am not sure about the best way to load data from the server and add it to the store.

Imagine a two tier hierarchy for data:

• User
  • Payment

Each user can have zero-to-many payments.

From what I've gathered online, it is best to store normalized data on the client side, but for simplicity's sake, let's use arrays of objects for this example:

{
  users: [],
  payments: []
}

Now, if I wanted to show all of the payments for one user, I could go through all of the payments in the store and filter out those with a predefined userId.

Alternatively if the data was fully normalized, each user object would have an array called payments which would contain the ids of the payments belonging to that user and they could be extracted this way.

It all works fine if all of the existing data is preloaded in the store, but are there any alternatives when that is not possible (for example if paging was used)?

• Do I load just the specific user's payments and put them in the payments array? What about when I want to display another user's data? Do I just add those to the payments array as well or do I reset the array?
• Do I add a new array to the store called selectedUserPayments and pre-fill that one? If that is the case, it is possible that I have the same payment both in the payments array (for example to display a list of all payments in the system) and in the selectedUserPayments array and I have to sync both of them.

Is there a standard way of solving these issues? All of the examples I have found online either don't have hierarchical entities or preload all of the data in advance.

Answer 1

Generally you don't want to have the same data in two different places so you would use a normalized version and store only the ids in different places. You can think of the state like a local database, you would not want to have the same data in more than one place. If you want to have a collection of selectedUserPayments you should store it as a list of ids.

How you load the data for a specific user depends on what caching strategy you want to use. If the payments info is changing quite often on the server you might want to reload it each time, and reinitialise the payments array each time a user is selected. If it's not changing that often, a more practical approach, is to check when you select a user if you have the payments, if not, read them from the server and add them to the state. In this way visiting previously selected users would save a request since you don't need to fetch the payments again.