Question

我正在使用redux observable作为redux的中间件来处理副作用。我想在行动A在某个指定的时间段内（例如500毫秒）发出两次以上时发送行动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 });

<强> PING / 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

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

1 个答案: