在捕获错误时触发多个操作

Question

我正在努力弄清楚如何在 epics 的 catch 错误处理程序中触发多个操作。

我已经成功地弄清楚了如何使用 thunk-middleware 在我的 epics 中对成功的异步调用触发多个操作。见下文：

const editDomainsEpic = (action$) =>
  action$
    .ofType(EDIT_DOMAINS)
    .mergeMap((action) =>
      Rx.Observable.fromPromise(api.editDomains(action.payload))
        // Here we are using Redux thunk middleware to execute
        // a function instead of just dispatching an action
        // so that we can disptach two actions
        // ----------------- vvv
        .map((domain) => (dispatch) => {
          // Display Growl Notifications
          dispatch(
            displayGrowlNotification(
              MESSAGE_TYPES.SUCCESS,
              `${domain.name} was saved`
            )
          )
          // Fire Success Action
          dispatch({
            type: EDIT_DOMAINS_SUCCESS,
            payload: { domain }
          })
        })
        .catch((error) => Rx.Observable.of({
          type: EDIT_DOMAINS_ERROR,
          payload: { error }
        }))
        .takeUntil(action$.ofType(EDIT_DOMAINS_CANCEL))
    )

任何人都可以指导我如何获得 catch return 或触发两个可观察到的动作，这些动作将与我成功时的处理方式类似吗？

Answer 1

Observable.of() 支持任意数量的参数，并且会一个接一个地发出所有参数，因此要在 catch 中发出多个动作，您只需添加更多参数即可。

有了这些知识，您还可以使用它来调度多个操作以取得成功，而不是发出一个 thunk 并强制自己调用 dispatch。

const editDomainsEpic = (action$) =>
  action$
    .ofType(EDIT_DOMAINS)
    .mergeMap((action) =>
      Rx.Observable.fromPromise(api.editDomains(action.payload))
        .mergeMap((domain) => Rx.Observable.of(
          displayGrowlNotification(
            MESSAGE_TYPES.SUCCESS,
            `${domain.name} was saved`
          ), {
            type: EDIT_DOMAINS_SUCCESS,
            payload: { domain }
          }
        ))
        .catch((error) => Rx.Observable.of({
          type: EDIT_DOMAINS_ERROR,
          payload: { error }
        }, {
          type: ANOTHER_ONE,
          payload: 'something-else'
        }))
        .takeUntil(action$.ofType(EDIT_DOMAINS_CANCEL))
    )

这会更符合 RxJS 的习惯（因此 redux-observable），但这不一定是必需的。

在捕获错误时触发多个操作

Firing multiple actions on catch error

redux-observable