Redux Observable：複数のクリックでディスパッチアクション（2つ以上）

Question

私はreduxのミドルウェアとして副作用に対処するためにobservableを使用しています。私は、アクションBが特定の期間（例えば500ms）に2回以上放射された場合にのみ、アクションAをディスパッチしたいと思います。このため

私の試み：この叙事詩が正しくリストにクリックを蓄積し、2より長いものをフィルタリングしますが、PINGアクションが後に送出され

const pingEpic = action$ => 
    action$ 
    .buffer(action$.ofType(CLICK).throttleTime(500)) 
    .map(x => x.length) 
    .filter(x => x >= 2) 
    .mapTo({ type: PING }); 

：ここdemo

はどのように壮大なルックスですもう1回クリックします。

Answer 1

複雑なrxjsをより小さなビットに分解することが簡単になります。

したがって、ダブルクリックでPINGし、ワンクリックでPONGし、CLICKが唯一のイベントソースです。

ダブルクリックRef

const doubleClick = action$ => 
    action$.ofType(CLICK) 
    .buffer(action$.ofType(CLICK).debounceTime(500)) 
    .map(x => x.length) 
    .filter(x => x === 2) 
    .mapTo({ type: PING }); 

シングルクリック

const singleClick = action$ => 
    action$.ofType(CLICK) 
    .buffer(action$.ofType(CLICK).debounceTime(500)) 
    .map(x => x.length) 
    .filter(x => x === 1) 
    .mapTo({ type: PONG }); 

PING/PONG

const pingEpic = action$ => 
    Rx.Observable.merge(
    singleClick(action$), 
    doubleClick(action$) 
) 

注、ストレートdebounceTimeとthrottleTimeの置き換えで動作しているようですが、

const pingEpic = action$ => 
    action$ 
    .buffer(action$.ofType(CLICK).debounceTime(500)) 
    .map(x => x.length) 
    .filter(x => x >= 2) 
    .mapTo({ type: PING }); 

いますが、これで起こって任意のPONGsを得ることはありません。 （減速機にはconsole.logを追加すると、少しより良い流れを示している）

const pingReducer = (state = { isPinging: 'NO' }, action) => { 
    console.log('reducer', action.type) 
    ... 

はここFiddle