/component-store 선택자에는 방출하기 전에 상태를 안정시킬 수 있는 옵션이 있습니다debounce. 그러나 이것은 무엇을 의미하며 어떻게 작동합니까?

NgRx 구성 요소 저장소

내 응용 프로그램에서 구성 요소 상태를 관리하기 위해 @ngrx/component-store을 사용하기 시작했으며 지금까지 이 기능이 마음에 듭니다! 이 게시물에서는 @ngrx/component-store를 사용하는 방법이나 이유에 대해 설명하지 않겠지만 자세한 내용을 알고 싶다면 에서 확인하십시오.

디바운스 선택자

이 게시물에서는 {debounce} 메서드에 대한 select 구성 옵션을 자세히 살펴보고자 합니다. 다음은 디 바운싱에 대한 문서의 내용입니다.

Selectors are synchronous by default, meaning that they emit the value immediately when subscribed to, and on every state change. Sometimes the preferred behavior would be to wait (or debounce) until the state "settles" (meaning all the changes within the current microtask occur) and only then emit the final value. In many cases, this would be the most performant way to read data from the ComponentStore, however its behavior might be surprising sometimes, as it won't emit a value until later on. This makes it harder to test such selectors.

처음에 나는 이것이 무엇을 의미하는지 이해하지 못했기 때문에 Stackblitz에 예제를 작성하여 플래그가 선택기에 어떤 차이를 만드는지 확인했습니다.

데모 앱 설정

부울 토글 상태를 사용하여 구성 요소 저장소를 AppComponent의 일부로 설정합니다.

interface AppCompState {
  toggle: boolean;
}

그런 다음 이 토글에 두 개의 선택기를 생성합니다. 하나는 디바운스하고 다른 하나는 디바운스하지 않습니다.

update$ = this.select((s) => s.toggle, { debounce: false });

updateDebounced$ = this.select((s) => s.toggle, { debounce: true });

문서에서 선택기가 동기적이라고 말하면서 토글 상태를 관찰한 다음 다시 토글하는 두 가지 방법을 만들었습니다. 조금은 장난꾸러기 아이가 TV를 끄자마자 다시 켜는 것!

중요한 차이점은 delay(0) 호출을 비동기식으로 만들기 위해 두 번째 토글러에 toggleState를 포함한다는 것입니다.

// Set up synchronous auto toggle back
this.select((s) => s.toggle)
  .pipe(take(1))
  .subscribe(() => this.toggleState());

// Set up asynchronous auto toggle back using delay(0)
this.select((s) => s.toggle)
  .pipe(delay(0), take(1))
  .subscribe(() => this.toggleState());

데모 앱에서 두 개의 서로 다른 버튼으로 이러한 작업을 트리거합니다.

동기식 업데이트

동기화 업데이트를 클릭하면 debounce: false가 있는 선택기만 값을 내보냅니다. 디 바운스하지 않고 선택기는 변경된 모든 토글 값을 내보냅니다.



그러나 디바운싱하는 선택기는 변경 사항을 내보내지 않습니다. 왜 이런거야? 토글 값은 true로 시작하고 다시 true로 설정되기 전에 false로 설정됩니다. 이 모든 작업은 (동일한 마이크로태스크에서) 동시에 발생하며 debounceSync 함수에 의해 디바운스됩니다. 마이크로태스크의 끝에서 값은 여전히 ​​true이고 선택기는 방출하지 않습니다. 이를 보장하는 선택 방법에 distintUntilChanged가 있습니다.

비동기 업데이트

Update Async를 클릭하면 이제 두 선택기가 모두 값을 내보냅니다. debounceSync 함수는 이름에서 알 수 있듯이 동기식 업데이트만 디바운스합니다. 이제 디바운스된 선택기는 각각 다른 마이크로태스크에서 발생하는 모든 토글 변경을 내보냅니다.

이 모든 것이 무엇을 의미합니까?

성능

문서에서 제안한 대로 debounce: true를 사용하면 선택기가 마이크로태스크가 끝날 때만 새 값을 방출하므로 앱의 성능을 향상시킬 수 있습니다. 데모 앱에서 이는 선택기가 전혀 방출하지 않아 추가 작업/재렌더링이 발생하지 않음을 의미합니다. 디 바운싱은 불필요한 작업을 피합니다.

일관성

디바운스된 선택자에 의해 방출된 상태는 더 일관성이 있거나 논리적으로 정확할 수 있습니다. 예를 들어 선택기가 상호 의존적인 여러 속성에 의존하는 경우 선택기가 방출하기 전에 유효한 상태에 도달하기를 원합니다. 설정{debounce:true}은 임시 '잘못된 상태'에서 발생할 수 있는 모든 중간 값을 내보내지 않도록 합니다.

다음 단계

다음 게시물에서는 debounceSync source code을 검토하여 이 디바운싱이 실제로 어떻게 작동하는지 확인할 것입니다.