Is it necessary to unsubscribe from a Redux store in an Angular component

Question

I am almost certain that i should, but i have not found any specific information on the Redux documentation. My pattern in most of my Angular components, is that i subscribe/unsubscribe to a Redux store like :

import { Component, OnInit } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'selector',
    templateUrl: 'name.component.html'
})
export class ComponentNameComponent implements OnInit {
    private unsubscribe : Function;

    constructor(@Inject(AppStore) private store: Store<AppState>) {}

    ngOnInit() {
        this.unsubscribe = this.store.subscribe ( ()=>{ this.updateFromState(); });
    }
    // Is unsubscribing onDestroy necessary?
    ngOnDestroy(){
        this.unsubscribe();
    }

    this.updateFromState(){
        // ...
    }
}

So i would like to know if i should always unsubscribe from the Store, and what would happen if i didn't.

Answer 1

Yes you should destroy (unsubscribe) all the observables within your application when they are not in use. I have no idea about Redux store, but I feel you should still kill your observables in onDestroy.

What happens if you don't unsubscribe()?

First time when your component is loaded ngOnInit() will subscribe to store and now again if you go back to some other component and then revisit the same component, you will have new subscription along with previous one (so 2 subscriptions). This subscription count increases as many times as you revisit the component, which will reduce the performance of your application. So safer side you should be killing the previous subscription before creating new one, which is usually done in ngOnDestroy().