0

I'm new to NGXS and right now i'm trying to add on each of my state a loading and an error object. The easiest way would be to add a loading: boolean and an errors: {} on my state model.

But I decided to create another state named ApiRequestState which basically just contains the error and loading fields, for example:

export class ApiRequestStateModel {
   loading: boolean;
   errors: {}
}

Then have an action and state class to manage the values in it. This works for the most part, except that right now I have a page where I have to load several components and each component connects to the API all at once. The problem is I only have one loading and error state so I don't know how to track all of them at once.

Any ideas?

Thanks

Jed
  • 1,054
  • 1
  • 15
  • 34

1 Answers1

2

without really knowing what your rootstate looks like its gonna be hard to answer. but given that you have a loading: boolean state, you can definitely change it to an array of strings instead that would look like

loading = ['somerequest', 'anotherrequest', 'onemorerequest'];

//and when something is done
loading = loading.filter(x => x != 'thefinishedrequest')

once you do that, you easily determine if it is loading by reading

isLoading = loading.length > 0

note: you can event just use a loadingCounter:number, but that will really not give you any info on what is loading

anaval
  • 1,130
  • 10
  • 24
  • This is actually a good suggestion, i'll try this and accept it as the answer once I get it working. Thanks! – Jed Mar 01 '22 at 01:28
  • I ended up not doing this, there was a lot of problems encountered with several use-cases that I was doing in my app. I just used a custom HTTP interceptor for now, then just subscribe (completed, error) to the dispatch to get the errors and set the loading flag for each component. – Jed Mar 15 '22 at 09:15