NGRX效果在错误时破坏应用程序，如何处理错误?

Question

我在我的应用程序中使用了NGRX效果。 当它失败时，它似乎会中断流。

@Effect()
createUser$: Observable<Action> = _action$.ofType(fromUser.CREATE_NEW_USER_ACTION)
.pipe(
mergeMap((action: fromUser.CreateNewUserAction) =>
this._tokenService.post('users', action.payload)
.pipe(
map(response => {
this._router.navigate(
["dashboard", "users", "view"],
{ queryParams: { id: response.json().message.id } });
return new fromUser.CreateNewUserCompleteAction(response.json().message);
},
catchError(error =>
of(new fromUser.CreateNewUserFailedAction(error.json().message))
)
)
)
)
);

错误操作永远不会触发，我尝试记录。

Answer 1

你的tokenService返回什么？ 它可能正在内部处理来自 API 调用的任何错误。 只要您的 API 调用没有埋葬错误事件，CatchError 就应该有效。 如果是这种情况，您可能需要使用 Observable.throw(( 从该服务中抛出错误。

为了提高可读性，我通常更像这样格式化效果。

@Effect() updateUser$: Observable<Action>;
constructor(action$: Actions, tokenService: TokenService) {
this.updateUser$ = action$.ofType(fromUser.UPDATE_USER_ACTION)
.pipe(
mergeMap((action: fromUser.UpdateUserAction) => 
tokenService.patch(`users/${this.user.id}`, action.payload)
.pipe(
map(response => {
this._router.navigate(
["dashboard", "users", "view"], 
{ queryParams: { id: response.json().message.id } });
return new fromUser.UpdateUserCompleteAction(response.json().message); 
},
catchError(error => 
of(new fromUser.UpdateUserFailedAction(error.json().message))
)
)
)
)
);
}

这段代码看起来应该可以工作。 看看你的令牌服务。

Answer 2

看起来您的parentheses没有正确放置在第二个pipe函数中。map和catchError应在管道内平行。在您的代码中，catchError函数位于map内部。

@Effect()
createUser$: Observable<Action> = _action$.ofType(fromUser.CREATE_NEW_USER_ACTION)
.pipe(
mergeMap((action: fromUser.CreateNewUserAction) =>
this._tokenService.post('users', action.payload)
.pipe(
map(response => {
this._router.navigate(
["dashboard", "users", "view"],
{ queryParams: { id: response.json().message.id } });
return new fromUser.CreateNewUserCompleteAction(response.json().message);
}),
catchError(error =>
of(new fromUser.CreateNewUserFailedAction(error.json().message))
)
)
)
);

顺便说一句，这是一个很好的做法，将catchError与 http 请求放在一起，而不是放在外部pipe流中，这可能会停止可观察action$，并且NGRX框架不会收到任何未来的操作。