I have two feature modules (1) user profile and (2) blogs. The application lazy load these modules based on routes userprofile and blogs (1) http://localhost/userprofile and (2) http://localhost/blogs. When the routes change, there is an effect that calls an http service to retrieve the data from the server.

I want to prevent the http calls from the second time onwards and get the data from the application cache when the route changes. How do I design the app wide caching of the user profile and blogs so retrieving the data is from the global cache and don't make http calls?

I don't want to create a single store in the application at the application level for user profile and blogs because the feature modules will be used as a library (code reuse) by other applications so need to have code for those specific feature modules.

1 Answers

1
timdeschryver On

You can check if there is already something in the store or not before making the call

@Effect()
getOrder = this.actions.pipe(
  ofType<GetOrder>(ActionTypes.GetOrder),
  withLatestFrom(this.store.pipe(select(getOrders))),
  filter(([{payload}, orders]) => !!orders[payload.orderId])
  mergeMap([{payload}] => {
    ...
  })
)

See my post Start using ngrx/effects for this for more info.