Handling temporary data with NgRx

Question

I use @ngrx/entity.

First, what I mean by temporary data is when I need to fetch data that's going to need to live in the state for a short period.

I should probably also say that I don't really want to use @ngrx/component-store, which, as I understand it, could be the way to go, but I'd prefer keeping everything state related together instead of having some micro-states here and there.

Examples would be:

• The Current Product once I click on a record in a search list (read/write)
• Additional data to show, like displaying a modal window about the Product showing a detailed table of where the product is used

In the first case, option 1 could be that I have and ID in my state currentProductId and use a selector to get the detail of the product I want to work with. The problem I see here is that the list I'm loading is made of very basic properties for my product, like { id: number, name: string }. Using currentProductId would mean I would first have to load the detailed entity, and replace the one in the entities state. Which means my entities list should be based on a detailed version of Product with many optinal properties:

{
  id: number,
  name: string,
  description?: string,
  qty?: number,
  isActive?: boolean,
  image?: string
  ...etc
}

Question #1: Would this be a good approach?

Option 2 could be that instead, I am managing a currentProduct of type ProductDetail. My entities list would be made of Product[]. When accessing the detailed view, I load the detailed product inside my currentProduct and I assign it to undefined in ngOnDestroy.

Question #2: Is that a better approach? I am duplicating some data, but keeping the entities list as lean as possible. Also I don't have to care that some elements in my entities have more data than the others.

Now onto the second case. This time it is a read-only temporary data. When I click on a magnifying glass on the product, I want to show even more information. The twist is, this modal can be called from anywhere in my app. So I can't rely on currentProduct. I also have 2 types of data to load. First is the product itself, but second is the list of everything that uses the product. I come to the same reflection. Should I store this in 2 more properties? (forgive my naming) modalProduct and modalProductUses, load them when popup shows, dispose of them when it hides.

My understanding is that it's what I should do. It is indeed the "state" of my application, with a 3rd property named isModalVisible. Meaning I could take a snapshot of my state, and someone would be able to display the exact same thing on his side.

Question #3: Am I understanding this correctly?

Basically, I did not find much information about this kind of case on the internet. Examples are often very simple. Maybe there is something I am missing but I'm basically just looking for some guidance.

Answer 1

If I undertand the quesiton correctly, then Q1 and Q2 are somewhat the same. On a previous project, we duplicated the state.

For example,

The search lived in a search state, and was simply storing what the server returned. When someone navigated from search to a details page, then we would fetch the entity and store it in the entity state.

We did the same for detail models that showed temporary data. A request was made to the server, and that was simply shown in a modal. When the modal was closed, then its state would also be removed.

We did this for the same reasons as you mention, to keep things consistent.