Как получить ответ по идентификатору в RxJS

Question

Моя проблема заключается в следующем: я хочу отрицать симпатичную функциональность моего приложения. Я использовал действия для внесения изменений в мое приложение, например:

dispatch(likePost(1)) // => dispatch({ type: 'LIKE_POST', id: 1 })

Учитывая следующий пример:

Я отправляю действие одновременно: 0

dispatch(likePost(1))

Это вызовет мой actionSource:

actionSource$.
   pipe(
      filter(isActionOf(likePost)),
      debounceTime(500)
      mapTo('make-api-request-to-like-the-post')
   )

Так что это будет выглядеть так:

--DISPATCH(LIKE(1))---DEBOUNCE(500)---MAKE_API_CALL(1)---->

Но есть проблема с этим, что случится, если я сделаю следующие действия:

dispatch(likePost(1)) // at time 0ms
dispatch(likePost(2)) // at time 200ms

здесь мы столкнулись с проблемой, так как likePost (2) отклонил likePost (1), в результате чего только запрос с likePost (2)

--DISPATCH(LIKE(1))--200ms--DISPATCH(LIKE(2))--DEBOUNCE(500)--MAKE_API_CALL(2)--->

, так как я мог отменитьпо идентификатору или сделайте его уникальным по идентификатору.

Answer 1

Вы можете groupBy события с помощью id и затем применять debounceTime к каждой группе отдельно.

Например:

const { of } = rxjs; // = require("rxjs")
const { map, mergeMap, groupBy, debounceTime } = rxjs.operators; // = require("rxjs/operators")

of(1, 1, 2, 3, 1, 1).pipe(
  groupBy(id => id),
  mergeMap(likeById$ => 
    likeById$.pipe(
      debounceTime(500)
    )
  )
).subscribe(e => console.log(e));

<script src="https://unpkg.com/rxjs@6.5.3/bundles/rxjs.umd.min.js"></script>