この記事では、あなたが反応を考えて、RX問題をより簡単に解決するのを助けるための新しい図を導入するつもりです.

なぜ私たちはダイアグラムを必要としますか？

大理石図はRXJSパイプ(例えば演算子など)のビルディングブロックを定義する際に非常に明確ですが、入力のリストから目的の出力を表現するために使用することもできます.
Rxは、演算子と静的な関数では、あなたの問題を解決することができますがいっぱいです.しかし、RXJSはかなり魔法と楽しいですが、比較的簡単な問題を解決することは非常に複雑になることができます.
これは、RXDIAGのようなモデリングダイアグラムが、開発者がコンセプトを理解し、全体の問題を理解し、簡単に実装できるようにするためのモデリング図を必要とする理由です.

ハードウェア回路に対するリアクティブプログラミング類似性

リアクティブプログラミングはハードウェア回路と非常に類似している.どうやって?OK、このコードを命令型のプログラムで書きましょう

sum = a + b

どこ= 通常は代入を意味する.この行はa and b , 結果を変数に代入するsum .
では、次の行に書いておきます.

a = a + 1

a 意志増分と方程式sum = a + b はもはや有効ではない.しかし、反応プログラミングでsum = a + b 我々は、方程式が常に真実であることを意味します.
リアクティブプログラミングのこの性質は、ハードウェア回路と非常に類似している.例えば、全加算回路は、その2つの入力の合計を最小遅延で出力する.次のコードを書くと、同じ動作です.

import { combineLatest } from "rxjs";
import { map } from "rxjs/operators";

export function add(a$, b$) {
  return combineLatest([a$, b$]).pipe(map((a, b) => {a + b}));
}

呼び出し機能Observable sが通過した場合、返り値はa$ and b$ .

const sum$ = add(a$, b$);

回路図はなぜ？

上述のように、Rxはハードウェア回路と非常に類似している.一方、ハードウェア回路は、回路素子や配線としていくつかのボックスでワイヤとして簡単に描画される.
サーキットの配線と同じように、RXにパイピングがあります.では、なぜそれ以降の回路の名前?

図

RX(例えばrxjs)問題を解決するために、最初にあなたはそれをモデル化しなければなりません.データが定期的に来ているパイプとしてストリームを考えてください.
今すぐあなたのパイプを入力することができますし、出力パイプを取り出す大きなボックスとしてRxjsの静的関数と演算子を考えてみましょう.
今ちょうど紙の上にすべてを置く.それは、あなただけのrxdiagを作成!

この図では

着色は完全に任意ですが、

ブルーボックスは静的関数を示す

レッドボックスの演算子を示しています.

1行の矢印は、ストリーム(数字、関数など)ではない入力値を示します.

つの線矢印ショーObservables .

つのラインの矢印です.

矢印頭データの流れの方向を示します.

それはすべてです!

その他のサンプル

あなたのWebページで、ユーザーが入力する検索入力があると仮定します.あなたはsearch(text) サーバーにAJAXリクエストを送信し、Observable .
RXJSでのAjaxの実装はとても良い特性を持っていることを知っています.
今私たちの非常に有名な問題が立っている:
ユーザータイプのときに検索を開始します.ユーザーが入力した場合は、サーバーから戻った後に結果を参照してくださいする必要があります.しかし、ユーザが最終的に入力を続けて、結果が来たならば、その結果が最新でないので、要求はキャンセルされなければなりません.
また、ユーザーがかなり速く入力している場合、我々はユーザーが(200ミリ秒)の入力を停止していることを確認するまで、検索要求を開始する必要はありません.
この問題に対するrxdiagは以下の通りです.

ハッチング