Angular/ngrx 应用程序在注销单击时中断答案

【问题标题】：Angular/ngrx application breaks on logout clickAngular/ngrx 应用程序在注销单击时中断
【发布时间】：2018-03-08 08:57:29
【问题描述】：

我已经尝试解决这个问题 4-5 天，但仍然找不到问题的原因。

正如标题所说，每次我单击注销按钮时，应用程序浏览器都会冻结，无法关闭选项卡，为了再次运行应用程序，我必须打开另一个应用程序或通过任务管理器关闭浏览器。

我认为问题出在ngrx/effect，我正在使用它来清除localstorage。

这里是：

@Effect() logout$: Observable<Action> = this.actions$
        .ofType(fromActions.LOGOUT)
        .pipe(
            tap((action: fromActions.Logout) => {
                return this.authService.logout();
            }))

方法如下：

logout() {
    localStorage.clear();
  }

而且令牌还在，动作没有派发，我检查了动作，没有类型错误..

这里有两张照片，在单击注销之前和之后：

编辑：动作调度：

onLogout() {
    this.store.dispatch(new fromActions.Logout());
  }

减速机：

case AuthActions.LOGOUT: {
            return {
                ...state,
                loading: false,
                loggedIn: false
            }

【问题讨论】：

能否提供reducers代码和调度调用？
我不确定，但我想我什至不需要reducer代码，因为它是基于localStorage设置的，如果有令牌我将它设置为loggedIn

标签： javascript angular ngrx ngrx-effects

【解决方案1】：

在您的效果中，您正在返回注销操作，无限循环。

尝试创建一个 LogoutSuccess 操作并在 Logout 成功时返回它。

... .pipe(
tap((action: fromActions.Logout) => {
  return this.authService.logout();
}),
map(() => { return {type: 'NO_ACTION'}; })

【讨论】：

我试过return，没有return，我的错。
tap 执行代码并返回传递的参数。您应该添加一个地图以返回其他内容，然后传递的参数就是注销操作。我编辑了答案以添加代码示例。