RxJS subscription sink for unsubscribing gracefully in a component.
SubSink is a dead simple class to absorb RxJS subscriptions in an array.
Call unsubscribe() to unsubscribe all of them, as you would do
in your component library's unmount/onDestroy lifecycle event.
npm install subsink2 --saveThere are 3 main ways to use the SubSink: the "easy" way, the "add/array" way and the "id" way.
RxJS supports adding subscriptions to an array of subscriptions. You can then unsubscribe directly from that array. If this appeals to you, then feel free to use it. If you prefer the technique with SubSink using the setter (aka easy) syntax below, then use that. Either way, no judgments are made. This is entirely up to you to decide.
Example using the id method to collect the subscriptions.
export class SomeComponent implements OnDestroy {
private subs = new SubSink();
...
this.subs.id('my_sub').sink = observable$.subscribe(...);
// Unsubscribe by subId
this.subs.id('my_sub').unsubscribe();
...
// This subscription will not be unsubscribed by "subs.unsubscribe" method.
// You should unsubscribe it manually.
this.subs.id_('my_sub2').sink = observable$.subscribe(...);
// Unsubscribe manually
this.subs.id_('my_sub2').unsubscribe();
...
// Unsubscribe when the component dies
ngOnDestroy() {
this.subs.unsubscribe();
}
}Example using the sink property to collect the subscriptions using a setter.
export class SomeComponent implements OnDestroy {
private subs = new SubSink();
...
this.subs.sink = observable$.subscribe(...);
this.subs.sink = observable$.subscribe(...);
this.subs.sink = observable$.subscribe(...);
...
// Unsubscribe when the component dies
ngOnDestroy() {
this.subs.unsubscribe();
}
}Example using the .add technique. This is similar to what RxJS supports out of the box.
export class SomeComponent implements OnDestroy {
private subs = new SubSink();
...
this.subs.add(observable$.subscribe(...));
this.subs.add(observable$.subscribe(...));
// Add multiple subscriptions at the same time
this.subs.add(
observable$.subscribe(...),
anotherObservable$.subscribe(...)
);
...
// Unsubscribe when the component dies
ngOnDestroy() {
this.subs.unsubscribe();
}
}
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent