Why does my BehaviorSubject update when I don't pass the new value to the next() method?

Question

I'm trying to make a simple TODO application using RXJS. I have a JSON server mock database containing TODO tasks. So I ended up with this TasksService: @Injectable({providedIn:'root'})exportclassTasksService{private_tasks:ITask[]=[];private_tasks$:BehaviorSubject<ITask[]&g

P粉080643975 · Answer

As far as I understand, there are two problems with this code. First, you don't know why the console logs are duplicated. Second, even though you didn't call ".next()" on the behavior subject, you don't know why the view updated.

Let’s start with the first one.

You need to understand how rxjs observables and BehaviorSubjects work. A normal Observable, when you subscribe to it, will wait for a certain value to be emitted, and then every time that happens, it will call the operation you attached to it. For example:

exampleSubject = new Subject();

ngOnInit(): void {
    this.exampleSubject.pipe(
        tap(console.log)
    ).subscribe();
}

emitValue() {
    this.exampleSubject.next("text");
}

Now please note that in this code we only subscribe once in ngOnInit. Despite this, console.log is called every time the emitValue() method is called (e.g. from a button). This is because the subscription lasts until unsubscribed. This means that the operation will be called every time next() is called on the topic.

So what happens when you subscribe multiple times? Let’s try it:

exampleSubject = new Subject();

ngOnInit(): void {
    subscribeToSubject(); // 1st
    subscribeToSubject(); // 2nd
    subscribeToSubject(); // 3rd
    this.emitValue();
}

emitValue() {
    this.exampleSubject.next("text");
}

subscribeToSubject() {
    this.exampleSubject.pipe(
        tap(console.log)
    ).subscribe();
}

We subscribed to a topic 3 times and now whenever a value is emitted, the console log is called 3 times. It is called for every subscription you create.

Now when we look at your example, the subscription is added every time the addTask button is clicked. That's why every time you add a task, there is an extra console log. But hey, in your first example, when you remove .next() you have some console logs even though you don't emit any values, why is that? Now we come to BehaviorSubject. This is a special theme that holds its value and emits it as soon as you subscribe. And it also emits every time you call .next() but you don't do that, so that's why it calls 1 console log every time you subscribe.

What you should do is call

this.tasks.pipe(tap((value) => console.log(value)
)).subscribe();

Only once, such as in ngOnInit()

Okay, now we enter the second period

This is very simple, but requires some knowledge of how references work.

In your service you put the entire task array into a BehaviorSubject. In fact, this subject holds a reference to this array. This means that every time you push a new value into the array, the BehaviorSubject will also own it. This is what happens, whenever you call the addTask method, a new value is pushed to the tasks array, and your BehaviorSubject also has it.