javascript - 如何在 RxJS mergeMap 中包含条件和非条件调用？

Question

在 api 调用获取数据后，我需要在 FETCH_DATA_SUCCESS 上调用一些进一步的操作。

'RESET_IMAGE_DATA' 和 'INITIALISE_FILTERS' 操作必须在每次 'FETCH_DATA_SUCCESS' 时调用。但是，'SET_PIVOT' 必须仅在 action.context === 'pivot' 时调用。

所以，有两种可能的情况。

在第一种情况下，调用了 'RESET_IMAGE_DATA' 和 'INITIALISE_FILTERS'。

在第二种情况下，'RESET_IMAGE_DATA'、'INITIALISE_FILTERS' 和 'SET_PIVOT' 被调用。

我尝试了各种解决方案都没有成功，下面是我最近的尝试。任何帮助将不胜感激。

const loadDataEpic = (action$, state$) =>
  action$.pipe(
    ofType('FETCH_DATA_SUCCESS'),
    mergeMap(action => {
      if (action.context === 'pivot') {
        return of({
          type: 'SET_PIVOT',
        });
      }
      return of(
        {
          type: 'RESET_IMAGE_DATA',
        },
        {
          type: 'INITIALISE_FILTERS',
        }
      )}
    )
  );

Answer 1

您可以将 of 更改为 from，这样您就可以发送一个数组，因为数组允许轻松进行动态插入。

像这样:

const loadDataEpic = (action$, state$) =>
    action$.pipe(
        ofType('FETCH_DATA_SUCCESS'),
        mergeMap(action => {
            const pivotActions = action.context === 'pivot'
                ? [{ type: 'SET_PIVOT' }]
                : [];
            return from([
                ...pivotActions,
                {
                    type: 'RESET_IMAGE_DATA'
                },
                {
                    type: 'INITIALISE_FILTERS'
                }
            ]);
        })
    );