better-programming の 5 Awesome RxJS Observables and Operators That Are Often Overlooked の翻訳です。
Pluck, Defer, FromEvent など
RxJSを使用する場合、多くの場合、人々は map 、 filter 、reduce などの配列 operator を覚えています・・・・。
適切な理由で可能な限り使用することを強くお勧めしますが、より専門的な別の operator を使用すると、別の開発者がコードを小さく印刷したり、読みやすくしたりできる可能性があると言えます。
ここでは、これらのシナリオが発生したときに使用する一部を強調してみます。
・・・・・・
1. Pluck
各ソース値（オブジェクト）を、指定されたネストプロパティにマップします。
始めましょう。これは非常によく似ていますが、放出されたすべてのオブジェクトから選択したプロパティを1つだけ取得します。 実際に下の map operator を使用します。
次のように宣言されたインターフェイスがあるとします。
そして今、次のようなオブジェクトがあります。
すべての名前を選択したい場合、次のようにします。
そして、それぞれの家の通りについて：
・・・・・・
2. Defer
購読時にのみアクティブな遅延 observable を作成します。
これは、promiseとobservablesの違いの1つを強調しています。
promises が待機されている場合は、defer を使用して、observable 実行を遅らせることができます。 おそらく、ネーミングはそれが何をするのかを暗示していると推測しているかもしれません。 これは、cold observable とも呼ばれます。
クリックイベントを listens し、クリックされた日付を返すAngularアプリケーションがあるとします。
この問題を修正するには、 defer を追加します。
ほんの少しのコンテキスト。 hot observable （デフォルトでは、eager）である fromEvent を使用し、 defer を使用して cold に変更しました。
これは、 FromEvent の大きな道のりにつながります。
・・・・・・
3. FromEvent
イベントターゲットからのイベントタイプに基づいて放出する observable を作成します。
前に示したように、 fromEvent は最大3つのパラメーターを取ることができます。
- イベントが発火するターゲットです。
- listen するイベントの名前です。
- options の optional listener です。
事実上、 addEventListener と removeEventListener は、1つにラップされています。 passive、capture、onceなどのリスナーオプションを渡すことができ、オプションの3番目のパラメーターを1回指定できます。
これらの詳細に関する詳細情報が必要な場合は、AddEventListener にアクセスしてください。
使用される基本的な関数は実際には、add / removeEventListener であるため、これはRxJSとJavaScriptの類似性を示しています。
・・・・・・
4. ExhaustMap
投影された関数を適用した後、 observable を返します。 前の実行中にソースが別の observable を emits する場合、新しい emits は無視されます。
現在、これの使用は特別なユースケースであり、多くの場合、使用する必要はありません。 しかし、なぜそれが役立つのかを強調したかったのです。
ボタンクリックに関連付けられた支払いを行い、次のようなロジックを設定したとします。
現在、mergeMap は単なる平坦化 operator です。 つまり、 observable ソースを取得し、ラップ解除される新しい observable を返します。 したがって、payService の pay 機能は、observable を返す必要があります。
exhaustMapは、mergeMap（mergeAll + map ほとんど違いはありません）と同様に、平坦化機能の一部です（exhaust+ map の組み合わせです）。
ただし、ここにある問題を見ることができます。 ユーザーは複数回 pay をクリックして、複数のリクエストを効果的に実行できます。
もちろん、最初のクリック後にボタンを無効にすることもできますが、イベントストリームも保護する必要があります。
この問題は、exhaustMap で解決できます。これは、inner observable pay が HTTPS リクエストおよびレスポンスを介して実行されている間、他のすべての動作が無視されるためです。
・・・・・・
5. ObserveOn
提供されたスケジューラで、observable の動作を実行できます。
次に、observeOn を使用してスケジュールの領域に移動しますが、これについては詳しく説明しませんが、必ず確認しておくべき優れたリンクをいくつか提供します。
ただし、たとえばパフォーマンスやユーザーエクスペリエンスを向上させるために、イベントをキューに入れる場所を制御したい場合があります。
以前に投稿したブログの1つである RxJSを使用してドラッグアンドドロップを簡単にし、subscribeOn を使用してデフォルトの asyncScheduler から animationFrameScheduler に再ペイントを行うタイミングを変更することで最終的なソリューションを示しました。
animationFrame キューを使用して、よりスムーズ/より高いフレームレートのペイントを取得するために、タスクキューにキューイングすべきではないことを意味します。
このタイプのテクニックは、通常アニメーションを行う場合にも有効です。
詳細を確認するには、私の投稿をご覧ください。これは、私が言及しなかった他のオペレーターをあなたを見ることで出来るはずです。
スケジューリングの詳細：
- Michael Hladkyによる素晴らしいビデオ： RxJs schedulers from outer space.
- AndréStaltzからの古くはあるがまだ効果的な記事： Primer on RxJS schedulers.
私はこれについて長い投稿をしようとはしませんでしたが、いくつかの詳細な説明を避けることはできませんでした。 知識を共有し続けます。 それは私たちを強くするだけです。
