NGXS: loading and error messages in state

Question

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

Answer 1

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