http请求失败后的Ngrx重定向

Question

我有一个ngrx效果从服务http加载数据我想重定向到url在错误的情况下，而数据加载。问题是重定向不工作，页面是空白的结果页中没有代码。

这是对来自service的负载数据的影响:

loadConfig$ = createEffect(() => {
return this.actions$.pipe(
ofType(AppActionTypes.loadConfig),
switchMap(() => {
return this.configService.getConfig().pipe(
map((config: any) => {
console.log('loadConfig  %o', config);
return AppActionTypes.configLoaded({configuration: config});
}),
catchError((err, caught) => {
console.log('loadConfig catchErr %o', err);
return of(AppActionTypes.errorAppInitializer(err));
})
);
})
);
});

这个效果用于处理错误:

errorAppInitializerRedirect$ = createEffect(() => {
return this.actions$.pipe(
ofType(AppActionTypes.errorAppInitializer),
tap(() => {
console.log('errorAppInitializerRedirect');
return this.router.navigateByUrl('/auth/errors');
})
);
} ,
{dispatch: false}
);

在浏览器中显示空白页面，不呈现任何html。

<app-root></app-root>

任何想法?

谢谢!

Answer 1

1-从errorAppInitializerRedirect$中的Tap中移除return:

errorAppInitializerRedirect$ = createEffect(() => {
return this.actions$.pipe(
ofType(AppActionTypes.errorAppInitializer),
tap(() => {
console.log('errorAppInitializerRedirect');
this.router.navigateByUrl('/auth/errors');
})
);
} ,
{dispatch: false}
);

Tap运算符不能返回与原始值不同的值。在RxJs文档中，他们将Tap描述为"一个返回与源相同的Observable的函数"……当你想用通知影响外部状态而不改变时使用notification"

2-当你调用this.router.navigateByUrl('/auth/errors')时，检查你是否真的有正确的引用this，因为它在效果中是一个不同的作用域。

我可以根据你的反馈来发展答案。