RxJS：クリックした後にリフレッシュボタンを無効にする

Question

RxJSを初めて使用し、1秒ごとにデータをリフレッシュできる簡単なデモを試みました。

ボタンを作成し、そこからクリックストリームを作成しました。 問題は、ボタンをクリックするたびにfalseを出し、1秒後にもう一度trueを返すストリームを作成したいときに開始されました。

たとえば、開始時に更新できるように、初期状態はtrueです。 ボタンをクリックすると、クリックした直後に新しい値がfalseになるはずです。

最後に1秒後に値が再びtrueになるはずです。

私はそれを作成して成功しましたが、ひどく見えます。 良いアイデアとクリーンなアイデア 別のことは、RxJSをここで使うのは良いアイデアであるかどうかは分かりません。ブール値をtrueに設定してクリックした後にfalseに設定し、setTimeoutをtrueに戻してからです。ここで

は私がやったことです：rxjsと非同期操作の取り扱い

// The stream of the button clicks. 
$clicksStream 
    // Change the click stream to the timed true false change. 
    .switchMap(() => Observable 
        // Emit first value immediately and every 1 second after. 
        .timer(0, 1000) 
        // Map each one - 0 becomes false and others true. 
        .map(x => !!x) 
        // Take only first two items. 
        .take(2)) 
    // Always the start value is true. 
    .startWith(true); 

Answer 1

は優れたアイデアです。これは、反応性プログラミングについてのもので、rxjsはこれを行う上で優れています。

作成したコードの美しさは純粋です。それはどんな外部の文脈にも依存しません。

setTimeoutと状態を変更するにはブール値を使用することはもちろんですが、純度と機能プログラミングの代償として機能します。あなたは命令的プログラミングと副作用をするでしょう。それはそのコンテキストに非常に依存する：そして、コードの意味は、コードのその部分と同じ

button.addEventListener("click", function refresh(event) { 
    refreshData(); 
    setTimeout(renderButton, 1000, true) 
    renderButton(false) 
}) 

問題ではありません。それが機能するには、refreshDataとrenderButtonを実装する必要があります。また、その範囲からアクセス可能である必要があります。

しかし、コードは完全に独立していたので、別の場所にコピーして貼り付けることもできます。

他の問題は、クリックハンドラ関数は、あまりにも多くのこと（実際には、データをリフレッシュボタンの新しい状態をレンダリングし、タイムアウトを起動するための責任があるということである。それは完全に単一責任の原則を壊すです。

私は、あなたが生成したコードのメリットを見て助けたと思っている。それは、それはそれに慣れるの問題だ、実際にはかなり良いです。あなたが作ることができ

一つの簡単な単純化ではなく、startWithとmapToを使用することになりの種類のハックの!!x :)

$clicksStream 
    // Change the click stream to the timed true false change. 
    .switchMap(() => Observable 
        // just a timer of 1000ms 
        .timer(1000) 
        // when it emits we just return true 
        .mapTo(true) 
        // Take only first two items. 
        .startWith(false) 
) 
    // Always the start value is true. 
    .startWith(true); 

Answer 2

timeoutWith演算子を使用してこれを行うことができます。

$clickStream 
    .switchMapTo(
    // Start with false 
    Observable.of(false) 
     // If no values are emitted for 1 second emit true 
     .timeoutWith(1000, Observable.of(true)) 
) 
    .startWith(true);