Redux Observable: действие отправки при нескольких щелчках (два или более)

Я использую redux observable в качестве промежуточного программного обеспечения для redux, чтобы справиться с побочными эффектами. Я хочу отправить действие A только тогда, когда действие B было выполнено более двух раз за определенный период времени (скажем, 500 мс).

Моя попытка: демонстрация

Вот как выглядит эпично:

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

Эта эпопея правильно накапливает клики в списках и фильтрует те, которые длиннее двух, но действие PING отправляется после еще одного дополнительного щелчка.


javascript redux rxjs redux-observable
person feerlay    schedule 23.12.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Мне легче разбить сложные rxj-файлы, разбив их на более мелкие части.

Итак, вы хотите 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$)
  )

Примечание, похоже, он работает с прямой заменой 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 в редуктор немного лучше показывает поток)

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

Вот пример Fiddle.

person Richard Matsen    schedule 24.12.2017
comment
Большое спасибо! Это именно то, чего я хотел добиться :) - person feerlay; 25.12.2017