Lazily load data into NgRX store

Question

I have a SPA web app that uses ngrx. (I inherited that, maybe I wouldn't use ngrx if I implemented the thing myself). Can someone tell me if the concept of a "lazy data loading" is applicable to ngrx?

For example, there is a resource that is occasionally required by different components. Normally I would do a service that retrieves this resource from an external API. Internally, on the first request, the service is going to return an observable that will be filled in from a queried data + cached, so the future accesses will return an observable that already has the value.

Now, with NgRX I don't see a way to intervene at the access level, because there is no "logic" happening when the data is retrieved from the state.

Sure, I can query the resource upfront, but from the software design point of view, I don't want to care about "when" the query happens, I just want to know that it happens when it's needed.

timdeschryver timdeschryver · Accepted Answer · 2020-08-06T07:33:42

The service can still cache that data if you want?

A common pattern is to check if the state if available in the effects see https://timdeschryver.dev/blog/start-using-ngrx-effects-for-this#4-using-a-selector-inside-your-effects for an example.

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

Lazily load data into NgRX store

1 Answers