rxjsポーリングして、手動でtimerwhenリフレッシュ

Question

をリセットし、私は、関連するアプリケーションで、次のライブラリを使用しています：角度4.xでは、ngrx 4.xのは、5.4.x

をrxjs私は私が必要とするAPIを持っています5分ごとに投票します。ユーザーは手動でデータを更新することもできます。そのデータはngrxストアに格納されます。私はngrxエフェクトを使用しているので、データは 'FETCH'型のアクションをディスパッチすることによって取り出されます。

nxrxストアに 'FETCH'アクションをディスパッチするrxjsストリームをセットアップしたいとします。これは、ユーザーが手動でストアを更新するときにリセットされるスライド式の5分タイマーです。ストリームは、購読時に最初に値を送出する必要があります。

タイマーをリセットする方法がわかりません。プレーンなJavaScriptで私は次のような何かをするだろう：

console.clear(); 
 
let timer; 
 
let counter = 0; 
 

 
function fetch() { 
 
    console.log('fetch', counter++); 
 
    poll(); 
 
} 
 

 
function poll() { 
 
    if (timer != null) { 
 
    window.clearTimeout(timer); 
 
    } 
 
    timer = window.setTimeout(() => { 
 
    console.log('poll'); 
 
    fetch(); 
 
    }, 5000); 
 
} 
 

 
function manualGet() { 
 
    console.log('manual'); 
 
    fetch(); 
 
} 
 

 
fetch();

<button onClick="manualGet()">Get Data</button>

質問：どのように私は別の流れが再び例のように発する時にリセットされた間隔で放出するのですか？

Answer 1

ストリームには、タイマーとユーザー入力の2つのコンポーネントが必要です。だから、ユーザーの入力から始めましょう。私はクリックすることができますいくつかのボタンを仮定します：

const userInput$ = Observable.fromEvent(button, 'click'); 

は、今、私たちは毎回userInput$発するをリセットタイマーを開始したいです。私たちは、使用して

userInput$.switchMap(() => Observable.timer(0, 5000)); 

は、しかし、我々はまた、このストリームは、最初のボタンをクリックしたユーザーせずに開始することを行うことができます。

userInput$.startWith(null); 

は、今、私たちは一緒にすべてを置く：私は5秒タイマーではなく、5分タイマーを使ってあなたの例を（以下午前

Observable.fromEvent(button, 'click') 
    .startWith(null) 
    .switchMap(() => Observable.timer(0, 5000)) 
    .subscribe(() => dispatchFetch()); 

注しかし、それも問題ではありませんあなたはその質問で言及しました）

Answer 2

バニラJSでそれを書いた後、私はタイマーのソースがデータでなければならないことに気付きました。その源泉が何であるか把握するのに苦労していました。明らかに、私はそれをリセットする必要があったので、タイマーにすることはできませんでした。

私はより良い選択肢に開いているが、ここで私はそれを解決する方法である：私はフェッチイベントに関連する成功のアクションに耳を傾けていngrxで

console.clear(); 
 
let counter = 0; 
 
const data = new Rx.BehaviorSubject(null); 
 

 
function fetch() { 
 
    data.next(counter++); 
 
} 
 

 
function manualGet() { 
 
    console.log('manual'); 
 
    fetch(); 
 
} 
 

 
// setup poll 
 
data.switchMap(() => Rx.Observable.timer(5000)) 
 
    .subscribe(() => { 
 
    console.log('poll'); 
 
    fetch(); 
 
    }); 
 

 
// subscribe to the data 
 
data.filter(x => x != null). 
 
    subscribe(x => { console.log('data', x); }); 
 

 
// do the first fetch 
 
fetch();

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.5/Rx.min.js"></script> 
 
<button onClick="manualGet()">Get Data</button>

を。