Angular2 is this the right way to use Observables?

Question

How does the 'subscribe' and 'unsubscribe' work with Observable in Angular2?

My architecture is as following:

CRUD(Repo) service that contains CRUD operations and returns an Observable

In-between service that talks to CRUD. This service is injected into components and contains private BehaviorSubjects. I expose the underlying values as such

get selectedClient(): Observable<Client> {
    return this._selectedClient.asObservable();
}

get clients(): Observable<Client[]> {
    return this._clients.asObservable();
}

At the component level, I access the data by subscribing to previously mentioned getters as such:

deleteClient() {
 this.selectedClient.subscribe(actualClient => {
    this.clientStore.deleteClient(actualClient).subscribe(response => {
        if (response) {
            this.router.navigate(['/clients']);
        }
    });
 }).unsubscribe();
}

updateClient() {
  this.clientUpdateForm.submitClientForm().subscribe(client => {
        if (client) {
            this.growlService.showInfoMessage("Client updated", client.firstName + " " + client.lastName);
        }
  }).unsubscribe();
}

this.selectedClient.subscribe(client => {
    this.clientForm = this.clientUpdateForm.clientForm;
}).unsubscribe();

First I want to ask, is there anything wrong with this design? Secondly, when do I need to unsubscribe and when not to?

The idea is that the selectedClient is the state object for the application.

However it brings all of this 'subscribe/unsubscribe' in every component, and from my understanding if you don't unsubscribe you will add another subscription to the subscription array, which means any change will now trigger the code under the subscription twice.

Should the app have the concept of 'selectedItem' at all?

Alexander Ciesielski Alexander Ciesielski · Accepted Answer · 2016-09-23T19:19:16

Your design looks pretty solid. You might want to consider ngrx/store, they also make use of Observables / BehaviorSubjects, but additionally implement Redux pattern, which improves overall code readability and design.

Usually you don't need to unsubscribe from Observables, e.g. HTTP observables complete by themselves after returning a value (or erroring).

Observables need to be unsubscribed from when they don't complete, for example Observable.timer, or if retrieving parameters from routerService.

Angular2 is this the right way to use Observables?

1 Answers