是否有一种更简洁的方法可以在合并中组织多个 RXJS 可观察对象？

Question

下面的史诗按预期工作。在进行 api 调用之前，它会在合并运算符中调用多个操作。但是，我只是想知道有没有比我列出单独的 observables 更简洁的方法来调用重置操作。是否可以在数组中列出它们？还是其他方式？

const imageUploadEpic = (action$, state$) =>
  action$.pipe(
    ofType('UPLOAD_IMAGE'),
    mergeMap(action =>
      concat(
        merge(
          of({ type: 'RESET_IMAGE' }),
          of({ type: 'RESET_COLOURS' }),
          of({ type: 'RESET_LOCALISER' })
        ),
        from(
          axios.post(`/uploads/url`, {
            url: action.src
          })
        ).pipe(
          map(response => ({
            type: 'UPLOAD_IMAGE_SUCCESS',
            data: response.data,
          })),
          catchError(error =>
            of({
              type: 'UPLOAD_IMAGE_ERROR',
              error
            })
          )
        )
      )
    )
  ); 

Answer 1

您可以利用concat 接受ObservableInput 参数并且数组是ObservableInput 的事实：

const imageUploadEpic = (action$, state$) =>
  action$.pipe(
    ofType('UPLOAD_IMAGE'),
    mergeMap(action =>
      concat(
        [
          { type: 'RESET_IMAGE' },
          { type: 'RESET_COLOURS' },
          { type: 'RESET_LOCALISER' }
        ],
        from(axios.post(`/uploads/url`, { url: action.src })).pipe(
          map(response => ({
            type: 'UPLOAD_IMAGE_SUCCESS',
            data: response.data,
          })),
          catchError(error =>
            of({
              type: 'UPLOAD_IMAGE_ERROR',
              error
            })
          )
        )
      )
    )
  );