next() 메서드에 새 값을 전달하지 않으면 BehaviorSubject가 업데이트되는 이유는 무엇입니까?

Question

RXJS를 사용하여 간단한 TODO 애플리케이션을 만들려고 합니다. TODO 작업이 포함된 JSON 서버 모의 데이터베이스가 있습니다.

그래서 저는 다음 TasksService를 사용하게 되었습니다:

으아악

작업을 추가할 때 즉시 서버에 게시하고 싶지 않습니다. 따라서 서버에서 작업을 가져올 때 이를 _tasks 속성에 저장한 다음 _tasks$:BehaviorSubject 의 next() 메서드에 전달합니다. 나중에 내 작업을 서버에 일괄 게시하고 싶기 때문에 이제는 해당 작업이 Angular에서 올바르게 표시되기를 원합니다.

내 AppComponent에서 작업을 가져와 작업 속성에 할당합니다.

으아악

내 HTML 템플릿에서는 비동기 파이프를 작업 속성으로 사용하고 작업을 표시합니다.

으아악

그런데 TaskService에서 실수로 다음 줄을 삭제했습니다. this._tasks$.next(this._tasks);

이제 내 방법은 다음과 같습니다.

으아악

하지만 작업 추가는 여전히 가능합니다! BehaviorSubject에 새로운 작업 배열을 전달하지 않더라도 Angular는 새로 추가된 작업을 표시합니다.

그래서 내 작업에 그 가치를 기록하기로 했어요! : 내 AppComponent 클래스의 BehaviorSubject<ITask[]> 으아악

예상대로 작업이 추가됩니다. 하나의 작업이 포함된 배열을 얻을 때마다:

으아악

그러나 TaskService의 addTask 메서드에 다음 줄을 반환하면 다음과 같습니다.

this._tasks$.next(this._tasks);

다음 로그를 받았습니다:

으아악

그래서 저는 Observable이 왜 이렇게 행동하는지 조금 이해가 되지 않습니다... 아마도 next() 메소드를 완전히 이해하지 못하는 것 아닐까요?

Answer 1

내가 아는 한, 이 코드에는 두 가지 문제가 있습니다. 첫째, 콘솔 로그에 중복이 있는 이유를 알 수 없습니다. 둘째, 동작 주제에 대해 ".next()"를 호출하지 않았음에도 불구하고 뷰가 업데이트된 이유를 알 수 없습니다.

첫 번째부터 시작해 보겠습니다.

rxjs observable과 BehaviorSubject가 작동하는 방식을 이해해야 합니다. 일반적인 Observable은 구독할 때 특정 값이 방출될 때까지 기다린 다음, 그런 일이 발생할 때마다 연결된 작업을 호출합니다. 예:

으아악

이제 이 코드에서는 ngOnInit에서 한 번만 구독한다는 점에 유의하세요. 그럼에도 불구하고 EmitValue() 메서드가 호출될 때마다(예: 버튼에서) console.log가 호출됩니다. 구독은 구독을 취소할 때까지 지속되기 때문입니다. 이는 해당 주제에 대해 next()가 호출될 때마다 작업이 호출된다는 의미입니다.

그렇다면 여러 번 구독하면 어떻게 되나요? 한번 시도해 보세요:

으아악

우리는 주제를 3번 구독했으며 이제 값이 방출될 때마다 콘솔 로그가 3번 호출됩니다. 이는 귀하가 생성하는 모든 구독에 대해 호출됩니다.

이제 예시를 보면 addTask 버튼을 클릭할 때마다 구독이 추가됩니다. 그렇기 때문에 작업을 추가할 때마다 추가 콘솔 로그가 생성됩니다. 하지만 첫 번째 예에서 .next()를 제거하면 값을 내보내지 않아도 일부 콘솔 로그가 표시되는데, 그 이유는 무엇입니까? 이제 BehaviorSubject를 살펴보겠습니다. 구독하자마자 그 가치를 간직하고 방출하는 특별한 테마입니다. 그리고 .next()를 호출할 때마다 내보냅니다. 하지만 그렇게 하지 않기 때문에 구독할 때마다 1개의 콘솔 로그를 호출합니다.

해야 할 일은 전화

으아악

한 번만(예: ngOnInit()에서)

자, 이제 두 번째 단계로 들어갑니다

매우 간단하지만 참조 작동 방식에 대한 지식이 필요합니다.

서비스에서는 전체 작업 배열을 BehaviorSubject에 넣습니다. 실제로 이 주제는 이 배열에 대한 참조를 보유합니다. 즉, 배열에 새 값을 넣을 때마다 BehaviorSubject도 이를 소유하게 됩니다. 이것이 바로 addTask 메소드를 호출할 때마다 새로운 값이 작업 배열로 푸시되고 BehaviorSubject에도 해당 값이 포함되는 현상입니다.