Z
Z
zlodiak2018-03-15 21:45:26
Angular
zlodiak, 2018-03-15 21:45:26

How does unsubscribing work with takeUntil?

Please help me understand one point in the work of unsubscribing with takeUntil. Here's a classic example:

import { Component, OnDestroy, OnInit } from '@angular/core';
import 'rxjs/add/operator/takeUntil';
import { Subject } from 'rxjs/Subject';

import { MyThingService } from '../my-thing.service';

@Component({
    selector: 'my-thing',
    templateUrl: './my-thing.component.html'
})
export class MyThingComponent implements OnDestroy, OnInit {
    private ngUnsubscribe: Subject<void> = new Subject<void>();

    constructor(
        private myThingService: MyThingService,
    ) { }

    ngOnInit() {
        this.myThingService.getThings()
            .takeUntil(this.ngUnsubscribe)
            .subscribe(things => console.log(things));

        this.myThingService.getOtherThings()
            .takeUntil(this.ngUnsubscribe)
            .subscribe(things => console.log(things));

    }

    ngOnDestroy() {
        this.ngUnsubscribe.next();
        this.ngUnsubscribe.complete();
    }
}

I'll explain what I understand is going on here and then ask about the place I don't understand.
1. there is a take(N) operator that takes N values ​​emitted by the stream
2. but there is a takeUntil(obs) operator that takes values ​​from the stream until the obs stream starts emitting any values. After this has happened, the values ​​from the main thread are not taken
3. usually Subject is used as obs from point 2. Because it can not only emit events, but also receive
4. so, first we declare a ngUnsubscribe variable of type Subject
5 in the class. then in each request we add a kind of conditional operator .takeUntil(this.ngUnsubscribe)
6. takeUntil takeUntil will start working (and therefore stop receiving data from the main thread) at the moment ngOnDestroy() is triggered. That is, when the user tries to leave the component
And now an incomprehensible place:
Why are 2 lines written in ngOnDestroy()?
this.ngUnsubscribe.next();
        this.ngUnsubscribe.complete();

Do I understand correctly that the first line passes an empty value (but still a value) to the Subject and this causes the Subject to emit at least something?
And about this.ngUnsubscribe.complete(); I don't have any thoughts at all. Why is it here? Extra code?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
D
dmitrygavrish, 2018-03-16
@zlodiak

1) Do I understand correctly that the first line passes an empty value (but still a value) to the Subject and this causes the Subject to emit at least something?
All right. The code specifies the type

private ngUnsubscribe: Subject<void> = new Subject<void>();
, therefore, the typescript compiler will not allow anything other than an "empty" value to be passed to .next().
2) And about this.ngUnsubscribe.complete();
That is, apparently, no one else will / will not be able to listen to this sequence after calling this method

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question