どのようにリバースエンジニアリングRXJSと学習反応プログラミング?第2部

こんにちは、友人、あなたがこのシリーズのパート2にそれをすることができたことをうれしく思います.あなたがパート1を見ていないならば、下記のリンクでそれをチェックしてください.

どのようにリバースエンジニアリングRXJSと学習反応プログラミング？

シャドドハーク・ Nov 27 ' 19・ 6分読む

#javascript #webdev #todayilearned

パート1で我々は話し合ったobservables そしていくつかのコアコンセプトReactive Programming . ここでは、第2部では、我々はさらに反応プログラミングに我々自身を満足させて、リバースエンジニアリングの航海を続けますRxJs . エンジニアのリバースエンジニアリングの方法について説明しますRx.map , filter . また、どのように表示されますobservable 置換するユーザPromises JavaScriptで.
あなたが働いたならばAngular または他のWebアプリケーションでは、おそらくコンポーネントからコンポーネントにデータを渡すことに気づいている.たとえば、APIリクエストを作成すると、データを受け取り、データに基づいてコンポーネントを更新します.また、時々、他のコンポーネントにデータの一部をフィルターして、伝播させます.
どこでこれで行きますか.私たちがAPI呼び出しをするとき、または、我々のアプリケーションで何らかのユーザーインタラクションが起こるとき、我々はデータの流れを生成しているのを見ます.我々は、このストリームのデータを聞くことができますobservable , また、他の作成することもできますobservables どちらが最初に聞きますかobservable . より大きなアプリケーションで、我々は非常にしばしばオブザーバブルのこの連鎖を見ます.別の観測可能から観測可能なものを返すことはRxJs 図書館.
ここでは、アプリケーションのデータフローを視覚化する図を示します.

我々の反応ライブラリでは、我々はまた、チェーンのオブザーバーブルを互いにできるようになりたい.まず第一に、我々はモンクapi コール.それでそれをしましょう

function fakeApi(param) {
 return new Promise((resolve, reject) => {
   setTimeout(() => {
     resolve(100)
   }, 1000);
 })
 // or reject
}

この機能がわかるように、約束を返します.では、この約束されたベース関数を観測可能にしましょう.

const o = new Observable();
function fakeApi(param) {
 setTimeout(() => {
   o.emit(100);
 }, 1000);
}

約束を解決する代わりに、我々は観測可能で我々の結果を発しています.私たちのコードは期待通りに動作します.私はあなたの力を見始めたと信じていますobservables 今から.おもしろい!じゃない?😊😊
今、我々は観察したいo もう一つの観察で.上記の図と同じように.では、どうやってそれを行うのですか?よく、我々はすでにAを持ちましたpipe 関数.あなたが前のポストからの例を思い出すならば、我々には以下がありました

const pipe = (...funcs) => x => funcs.reduce((effects, f) => f(effects), x);

では、このパイプ機能をObservable クラスを返しますObservable

class Observable {
 constructor() {
   this.fnArray = [];
 }

 subscribe(fn) {
   this.fnArray.push(fn);
 }

 emit(v) {
   this.fnArray.map(fun => fun(v));
 }
+ pipe(observable) {
+   const fn = x => observable.emit(x);
+   this.subscribe(fn);
+ }
}

したがって、パイプメソッドでは、別の観測ができるようになりました.このようにして、入ってくる観測値を使用して、キュリー関数を通して値を出力できます.

では、なぜ私たちはそれをしましたか?なぜなら、観測可能なパイプを動かし、別のオブザーバブルを返す能力が必要だったからです.下のコードを見てみましょう.

const o = new Observable();
const o2 = new Observable();

function fakeApi(param) {
  setTimeout(() => {
    o.emit(1);
    o.emit(2);
    o.emit(3);
  }, 1000);
}

fakeApi();
o.pipe(o2);

o2.subscribe(
  pipe(
    double,
    double,
    printFunction
  )
);

o 今は別の観測可能な配管o2 .outputs

I will print the 4 
I will print the 8 
I will print the 12 

かなりクールなハウ?わかりました、切りましょう.我々は、現在我々自身のものを実行しようとしますmap 観測可能演算子あなたがRXの公式ドキュメントに行くならば.あなたの適切な定義を見つけるmap .
https://rxjs-dev.firebaseapp.com/api/operators/map

In brief map is a function that takes in a function as parameter applies that function and returns a new observable.

下の写真を見ればもっと意味がある.

class Map {
 constructor(func) {
   this.observable = new Observable();
   this.func = func;
 }
 subscribe(cb) {
   this.observable.subscribe(cb);
 }
 emit(x) {
   const val = this.func(x)
   return this.observable.emit(val);
 }
}

クラスを作りましたMap . コンストラクタで新しいObservable そして、渡された関数を格納しますfunc . インsubscribe 我々は、特定の購読observable . そして最後にemit 機能を適用this.fun パームでx を返し、emit 観測可能な我々は始めた.
以来map JavaScriptのキーワードはオブジェクト内のマップをカプセル化する必要があります.そうしましょう.

const Rx = {};
Rx.map = f => new Map(f);

ここでは、空のオブジェクトを作成しましたRx キーを設定するmap を呼び出すnew Map() 渡された関数を持つオブジェクトです.次のようにこのマップを使用できます.

let c = o.pipe(Rx.map(v => v * -3));
c.subscribe(
  pipe(
    double,
    printFunction
  )
);

どの出力

I will print the -6 
I will print the -12 
I will print the -18 

そこにあります.我々は現在、非常に独自のマップメソッドを持っています.同様に、我々はまた、エンジニアをリバースすることができますfilter 演算子.
〜に行きましょうRxJs ドキュメントはどのように動作するかを確認します.
http://reactivex.io/documentation/operators/filter.html

写真は私たちにその機能性のより広い展望を与えます.マップに似ています.唯一の違いは比較関数であるということです.それで、それを造ろう.

class Map {
  constructor(func) {
    this.observable = new Observable();
    this.func = func;
  }
  subscribe(cb) {
    this.observable.subscribe(cb);
  }
  emit(x) {
    const val = this.func(x);
    return this.observable.emit(val);
  }
}
//...
Rx.map = f => new Map(f);

我々が得る前に、我々がそれを走らせるとき

let c = o.pipe(Rx.filter(v => v > 0));
c.subscribe(
  pipe(
    double,
    printFunction
  )
);

// output
I will print the 4 
I will print the 6 

私は、あなたが現在パターンを見ることができることを望みます.RxJs 演算子は特定のタスクを実行する関数であり、それらを中断することができます.
私はこの記事が有用であることを期待してください、あなたがより多くの記事を見たいと思うならば、共有、そして、私に続くコメントを残してください.
🚀🚀🚀🚀🚀🚀