Angular/ngrx application breaks on logout click

Issue

I have been trying to solve this for 4-5 days, but still can't find the cause of the problem.

As title says, every time I click logout button application browser freezes, can't close the tab, in order to run the app again I have to open another one or close the browser via Task Manager.

I assume the problem is with the ngrx/effect, I'm using it to clear the localstorage.

Here is it:

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

Here is the method:

logout() {
    localStorage.clear();
  }

And also the token is still there, the action is not dispatched, I checked the action, no type errors..

Here are two photos, before logout clicked and after:

EDIT: Action dispatch:

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

Reducer:

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

Solution

In your effect you are returning the Logout action, infinite loop.

Try creating a LogoutSuccess action and return it when Logout succeed.

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

Answered By - ibenjelloun