NGRX Effect执行完成后出现错误重定向问题排查

我基于NGRX搭建了一个Feature模块，核心代码如下：

Actions #

export const getOrganization = createAction("[Organization] Get");
export const getOrganizationSuccess = createAction("[Organization] Get Success", props<{response: Organization}>());
export const getOrganizationError = createAction("[Organization] Get Error", props<{request: string}>);

Reducers #

on(getOrganizationSuccess, (state, {response})=>{
        console.log("organizationReducer.getOrganizationSuccess")
        return {
            ...state,
            Organization: response
        }
    })

Effects #

export const getOrganizationEffect$ = createEffect(
    (
        actions$ = inject(Actions), 
        service$ = inject(OrganizationService),
        toastService$ = inject(ToastService)
    )=> {
        return actions$.pipe(
            ofType(getOrganization),
            switchMap(()=> {
                return service$.getOrganization().pipe(
                    map((response)=> {
                        console.log("response", response)
                        return getOrganizationSuccess({response: response.Data as Organization})
                    }),
                    catchError(({error})=> {
                        toastService$.sendErrorToasts(error);                        
                        return of(getOrganizationError())
                    })
                )
            })
        )
}, {
    functional: true
});

OrganizationComponent #

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { Organization } from '../models/Organization';
import { organizationSelector } from '../store/organization/organization.selectors';
import { getOrganization } from '../store/organization/organization.actions';

@Component({
  selector: 'app-organization',
  templateUrl: './organization.component.html',
  styleUrl: './organization.component.scss',
  standalone: false
})
export class OrganizationComponent {

  organization$: Observable<Organization | undefined>;

  constructor(
    private readonly store: Store
  ) {
      console.log("OrganizationComponent.constructor")
      this.organization$ = this.store.select(organizationSelector)
    }

  ngOnInit(){
    
    console.log("OrganizationComponent.ngOnInit")
    this.store.dispatch(getOrganization())
  }
}

OrganizationComponent模板 #

<div 
    class="organization-container"
    *ngIf="organization$ | async as organization">
    <div class="left-side panel">
        <app-organization-menu></app-organization-menu>
    </div>
    <div class="right-side panel">
        <router-outlet></router-outlet>
    </div>
</div>

登录相关Effect #

export const loginOrganizationEffect$ = createEffect(
    (
        actions$ = inject(Actions), 
        service = inject(OrganizationService),
        authenticationService = inject(AuthenticationService),
        toastService: ToastService = inject(ToastService)
    )=> {
        return actions$.pipe(
            ofType(loginOrganization),
            switchMap(({request})=> {
                return service.login(request).pipe(
                    map((response)=> {
                        const token: Token = response.Data as Token;
                        authenticationService.SaveToken(token)
                        return loginOrganizationSuccess({response: token})
                    }),
                    catchError(({error})=> {
                        toastService.sendErrorToasts(error);                        
                        return of(loginOrganizationError())
                    })
                )
            })
        )
}, {
    functional: true
});

export const loginOrganizationSuccessEffect$ = createEffect(
    (
        actions$ = inject(Actions), 
        router$ = inject(Router)
    )=> {
        return actions$.pipe(
            ofType(loginOrganizationSuccess),
            tap(()=>{
                console.log("loginOrganizationSuccessEffect$")
                router$.navigateByUrl("organization/dashboard");
            })
        )
}, {
    functional: true,
    dispatch: false
});

问题现象 #

• 预期效果：登录后跳转至organization/dashboard组件，随后加载组织数据
• 实际异常：登录后重定向到页面时出现错误，直接访问该页面则正常
• 关联操作：移除OrganizationComponent.ngOnInit中的this.store.dispatch(getOrganization())调用后，重定向恢复正常，初步认为是该dispatch导致异常

排查结果及解决 #

经排查，异常根源并非NGRX的dispatch操作，而是LogicComponent中存在错误逻辑：当重定向到该组件且检测到token存在时，会强制跳转到首页。移除该跳转逻辑后，问题完全解决。

内容的提问来源于stack exchange，提问作者mattylantz