从ngrx效果调用API时捕获错误

Posted 2021-05-06

我正在尝试捕获有关特定操作效果的错误。无论调用成功还是失败，一切都正常。但是，我认为代码非常冗长，可以对其进行改进，特别是：

• catchError部分，我返回empty()，但我认为应该返回SavedReplyDeleteFailed操作。这样做时，整个效果会中断并且无法编译，请不确定如何处理此效果的最佳方法。
• 我过于依赖tap和dispatch，而不是从map / mergeMap回调中返回操作。当我这样做时，效果编译也会中断。

如何应用以上改进？

    deleteSavedReply = createEffect(() => this.actions$.pipe(
        ofType(SavedRepliesActions.SavedReplyDeleteRequested),
        mergeMap( action => {
            this.store.dispatch( SavedRepliesActions.DeleteLoading({ isLoading: true }) );
            return this.savedRepliesService.deleteSavedReply(action.id).pipe(
                tap(res => {
                    this.store.dispatch( SavedRepliesActions.SavedReplyDeleteSucess({ id: action.id }));
                    this.toastr.success( 'Saved Reply has been successfully deleted');
                }),
                catchError((error) => {
                    this.store.dispatch( SavedRepliesActions.SavedReplyDeleteFailed({message: error.message}) );
                    this.toastr.error( error.message, 'Something went wrong');
                    this.store.dispatch( SavedRepliesActions.DeleteLoading({ isLoading: false }) );
                    return empty();
                })
            );
        }),
        map(() => {
            return SavedRepliesActions.DeleteLoading({ isLoading: false });
        }),
    ));

答案

您可以使用类似以下的代码来简化您的代码：

deleteSavedReply$ = createEffect(() => this.actions$.pipe(
  ofType(SavedRepliesActions.SavedReplyDeleteRequested),
  mergeMap(action => this.savedRepliesService.deleteSavedReply(action.id).pipe(
    switchMap(res => [
      SavedRepliesActions.SavedReplyDeleteSucess({ id: res.id }),
      UiActions.showToastrSuccess('Saved Reply has been successfully deleted')
    ]),
    catchError(error => of(
      SavedRepliesActions.SavedReplyDeleteFailed({ message: error.message }),
      UiActions.showToastrError(error.message, 'Something went wrong')
    ]))
  ))
))

为此，在redux思维方式中，您应该：

• 创建2个新动作UiActions.showToastrSuccess和UiActions.showToastrError以显示消息Toastr。显示消息是操作的可能目标。

• 在reducer标志中使用loading。这是状态的一部分，因此应在化简器中更改其值以代替效果。

例如：

on(SavedRepliesActions.SavedReplyDeleteFailed, (state) => ({
  ...state,
  loading: false
})),

on(SavedRepliesActions.SavedReplyDeleteRequested, (state) => ({
  ...state,
  loading: true
})),

希望它会有所帮助。