CODEWITHSUNDEEP
angularngrx
danday74
danday74

Reputation: 56946

How to manage Angular resolvers in an ngrx environment

The route is /sim/:id

I am using an Angular resolver to make an HTTP request to GET /api/sim/{id} to fetch a single piece of data (the page title) which is used in a layout component. The response is a big JSON object but I only want one single piece of data.

Then in the main component associated with this route I dispatch an ngrx action which triggers an effect which does an identical request GET /api/sim/{id} and populates the store with the response.

I then use an ngrx selector to retrieve the data from the store and the view gets populated (FYI the view uses a lot of the response data).

This works fine, but I am making 2 HTTP requests to the same endpoint. How could I best avoid this? I don't need code, just some direction. Thanks.

I am using the latest versions of Angular and ngrx.

Upvotes: 4

Views: 6069

Answers (1)

Nery Ortez
Nery Ortez

Reputation: 500

TL;DR: Use the data in the resolver.

Well, that's it.

Instead of dispatching an action to trigger an effect to fetch the data and trigger a new action to populate the store.... Have the resolver trigger that last action with the data to populate the store.

Take a look at this article for more ideas.

UPDATE:

Here's another idea: In your provider store the whole information in your router data.

Given that you are using the resolver to store just the title property (cuz that's all you need in the parent component) and getting access to ir through this.router.snapshot.data: If you store the whole data, you could also get a hold of it from the child component using:

this.router.parent.snapshot.data

Upvotes: 4

Related Questions