javascript - 使用 Redux-Observable 的通用 Epic

Question

我刚开始使用 Redux-Observable。我想制作一个从服务器请求数据的通用史诗。我希望对具有相同操作和 ID 的多个请求进行去抖动处理。但是，我不确定如何在不创建多个史诗的情况下执行此操作。

const TYPE_IFEXISTS_REQUEST = 'IFEXISTS_REQUEST';
export const IFEXISTS_REQUEST = (id, value) =>
  ({ type: TYPE_IFEXISTS_REQUEST, id, value });
export const IFEXISTS_EPIC = action$ =>
  action$
    .ofType(TYPE_IFEXISTS_REQUEST)
    .debounceTime(5000) // ERROR: debounces based on action type and not id
    .mergeMap(action =>
      fromPromise(api.get(`/api/exists/${action.id}/${action.value}`))
        .map(({ data }) => IFEXISTS_SUCCESS(action.id, data))
        .catch(() => of(IFEXISTS_FAILURE(action.id, 'Server error'))));

如何创建基于 Action 和 ID 去抖动的通用史诗？

---

更新:从来不知道 GroupBy。它与 switchMap 配合得很好。以下是我用过的。

action$
    .ofType(TYPE_IFEXISTS_REQUEST)
    .groupBy(action => action.id)
    .mergeMap(actionByIdGroup$ => 
        actionByIdGroup$
            .debounceTime(5000) // debounces based on action id
            .switchMap(action =>
                fromPromise(api.get(`/api/exists/${action.id}/${action.value}`))
                    .map(({ data }) => IFEXISTS_SUCCESS(action.id, data))
                    .catch(() => of(IFEXISTS_FAILURE(action.id, 'Server error')))
            );
    )

Answer 1

您可以使用 groupBy运算符(operator):

  action$
    .ofType(TYPE_IFEXISTS_REQUEST)
    .groupBy(action => action.id)
    .mergeMap(actionByIdGroup$ => 
        actionByIdGroup$
            .debounceTime(5000) // debounces based on action id
            .mergeMap(action =>
                fromPromise(api.get(`/api/exists/${action.id}/${action.value}`))
                    .map(({ data }) => IFEXISTS_SUCCESS(action.id, data))
                    .catch(() => of(IFEXISTS_FAILURE(action.id, 'Server error')))
            );
    )

actionByIdGroup$ 是具有相同操作 ID 的分组 Observable。意思是，只有具有相同 id 的 Action 才会成为同一流的一部分。在这种情况下，debounceTime 将应用于具有相同 ID 的操作。