/コンポーネントストアセレクタdebounce 状態を放出する前に解決するオプション.しかし、これは何を意味し、どのように動作しますか?

NGRXコンポーネントストア

使い始めました@ngrx/component-store 私のアプリケーションのコンポーネントの状態を管理するため、今まで私はそれを愛する!このポストでは、私は方法を説明するつもりでありません@ngrx/component-store しかし、あなたがより多くを知っていたいならば、これによってこれをチェックしてください.

セレクタセレクタ

このポストでは、私はよりよく見ます{debounce} このオプションはselect メソッド.ここでは、Docsが討論について言うものです.

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の一部としてコンポーネントストアをBooleanトグル状態で設定します.

interface AppCompState {
  toggle: boolean;
}

次に、このトグルの2つのセレクタを作成します.

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

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

docsが同期しているセレクタについて話すので、私はトグル状態を見て、それからそれをトグルする2つのメソッドをつくりました.あなたがそれをオフにするとすぐにいたずらいたずら子供のように戻ってテレビを回して!
重要な違いは、我々はdelay(0) 第2のトグルでは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());

我々はデモアプリで2つの異なるボタンでこれらのアクションをトリガします.

同期更新

をクリックして更新を同期するだけでセレクタdebounce: false 任意の値を出力します.議論を行わずに、変更されたトグル値をすべて表示します.

ただし、デフラグするセレクタは変更されません.これはなぜですか.トグルの値はtrueとして始まり、trueに設定される前にfalseに設定されます.これはすべて同時に起こります(同じMicrotaskで)、そして debounceSync 関数.MicroTaskの終わりには、値はまだtrueで、セレクタは発しません.があるdistintUntilChanged これを確実にするSELECTメソッドで.

非同期更新

更新をクリックすると、両方のセレクタが値を出力します.The debounceSync 関数は、名前が示すように、同期更新のみを要求します.現在、異なったMicrotaskで起こるように、討論されたセレクタはあらゆるトグル変化を発します.

これはどういう意味ですか。

顔つき

ドキュメントが使用を示唆するようにdebounce: true セレクタは、マイクロタスクの最後に新しい値を発するだけであなたのアプリケーションのパフォーマンスを向上させることができます.我々のデモアプリでは、これはセレクターは、すべての結果として結果を生成/再レンダリングされませんが発生しません.討論は不必要な仕事を避ける.

一貫性

討論されたセレクタによって発される状態は、より一貫しているか論理的に正しいかもしれません.たとえば、セレクタが複数のプロパティに依存していて、相互依存している場合、セレクタが発する前に有効な状態になります.設定{debounce:true} 我々が一時的な'無効な状態から生じることができたすべての仲介値を放出しないことを確実にします.

次の手順

次のポストではdebounceSync source code この議論が実際にどのように働くかを見るために.