Angular Architecture: How to handle state persistence with multiple HTTP Services?

Question

I was wondering how you should structure an app which makes calls to a backend.

Wrapping HTTP calls in a service seems like a natural way to do things, but how / where do you keep the data for consistency? E.g. I have a component which displays some kind of Todo list, which is retrieved from the backend OnInit. Now when routing away from this component and routing back again all its data is reset. Of course, you could call the backend again, but wouldn't it be more beneficial to keep the data in some kind of service (even the HTTP service) for further use?

To further clarify:

class Service {

    storedData: number[] = []
    allObjects: BehaviorSubject<any> = new BehaviorSubject()

    ...


    getObj(id) {
        if (!this.storedData.includes(id)) {
            this.getDataFromServer(id)
        }
        return this.allObjects.pipe(
            map(objects => objects.find(obj => obj.id === id)),
            filter(obj  => obj && true)
        )
    }

    getDataFromServer(id) {
        return this.http.get(id).pipe(
            tap(obj => {
                this.storedData.push(id)
                this.allObjects.put(id, obj)
            })
        )
    }
}

Would this be a viable approach or are there other ways of handling such situations?

Furthermore, what would be the best way to go for using an object which needs multiple services to fill all its fields. (Obj: {a: number, b: number}, a is retrieved by AService and b by BService ).

Where would you store these objects (Injecting AService in BService and storing it in BService / injecting both into a third service which provides the data to requesting components)?

And what would be the best way of storing it?

You should store your data in a `BehaviorSubject` within your service. And render it using the `async` pipe. Ex: `
{{todo.description}}
` — Ploppy, Nov 16 '19 at 09:44
for multiple api request in you can use `rxJS operators`. You can use` forkJoin`, `mergeMap ` , `switchMap` etc.. here is link of reference. https://medium.com/@luukgruijs/understanding-rxjs-map-mergemap-switchmap-and-concatmap-833fc1fb09ff — Developer, Nov 16 '19 at 09:47
Not talking about merging/joining requests, but more like sequential ones which have no connection to each other, other than their endpoint. — mortom123, Nov 16 '19 at 09:53

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Victor Savkin, former core Angular team member at Google who built the dependency injection, change detection, forms, and router modules, wrote an excellent article on Managing State in Angular Applications.

He identified six common types of states for web applications:

Server state
Persistent state
The URL and router state
Client state
Transient client state
Local UI state

Key Points

Server state is stored on the server and is provided, for example, via a REST endpoint
Persistent state is a subset of the server state stored on the client, in memory
Client state (such as filters used to create a list of items) is not stored on the server
RECOMMENDATION: It’s a good practice to reflect both the persistent and client state in the URL.

This means that a component would update the URL parameters to reflect the persistent state (i.e. server state that is being cached on the client in memory) as well as client state, such as selected filters. URL parameters may be added for each service for which state is being persisted.

The persistent state is stored in Angular services, where there would often be one service per functional unit, such as a Todo List service, a User service, and a logging service. Each of these services would handle state persistence behind the scenes. For example, when requesting data, the service would first check to see if the data had already been fetched from the server, and only if the data were missing, make an HTTP call.

Since services are long lived, the data may persist throughout the duration of the user session.

NgRx is a powerful framework, but it isn't needed for every application. Sometimes a design without NgRx is sufficient and simpler. You could start here: [Comprehensive Introduction to @ngrx/store](https://gist.github.com/btroncone/a6e4347326749f938510) — Christopher Peisert, Nov 16 '19 at 17:29

score 0 · Answer 2 · answered Nov 16 '19 at 14:18

So, first of all whenever you route back to that particular url from any page, since you have your service in your OnInit, so your backend will be called.

But Specifically, if you want that when you route back, your backend is not called, then you can use the concept of RouteReuseStrategy in your component, but I think it will be a loss, since whenever you route back from browser to that page, your backend won't be called, but your data is outdated.

Angular Architecture: How to handle state persistence with multiple HTTP Services?

2 Answers2

Key Points