Redux Observable：多次点击（两次或更多次）的调度操作

Question

我正在使用redux observable作为redux的中间件来处理副作用。我想只在行动A在某个特定时间段（比如说500ms）发出两次以上时才发出动作B。

我的尝试：demo

史诗般的外观如下：

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

此史诗正确累积列表中的点击并过滤那些长于2的点击，但PING操作将在另一次额外点击后调度。

Answer 1

我发现通过将复杂的rxj分解为更小的位来更容易。

因此，您希望单击一次双击和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 });

乒乓

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

注意，它似乎与throttleTime直接替换debounceTime，

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

但是你没有发生任何PONG事件。 （将console.log添加到reducer会更好地显示流量）

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

这是Fiddle的例子