使用takeUntil中断后重新订阅NGRX Effect的问题

你的问题核心在于：懒加载模块里的Effect用takeUntil完结了整个流，而NGRX的Effect是模块初始化时创建的单例，流完结后就不会再监听新的action了。下面给你几个实用的解决办法：

方法一：用路由进入/退出Action触发内部订阅（推荐） #

不要让takeUntil直接完结整个Effect流，而是把监听逻辑嵌套在路由进入Action的switchMap里，每次进入路由时开启新的订阅，退出时销毁内部流：

@Injectable()
export class FeatureEffects {
  afterSomeAuthLogicEffect$ = createEffect(() => 
    this.actions$.pipe(
      // 监听进入当前路由的Action
      ofType(featureActions.enterFeatureRoute),
      // 每次进入路由，创建新的监听流
      switchMap(() => 
        this.actions$.pipe(
          // 监听认证模块的目标Action
          ofType(authActions.someAuthSuccess),
          // 退出路由时销毁这个内部流
          takeUntil(this.actions$.pipe(ofType(featureActions.exitFeatureRoute))),
          // 你的业务逻辑
          map(() => featureActions.handleAuthSuccess())
        )
      )
    )
  );

  constructor(private actions$: Actions) {}
}

然后在路由守卫或组件里，进入路由时dispatchenterFeatureRoute，退出时dispatchexitFeatureRoute即可。这样每次进入路由都会重新开启认证Action的监听，完全符合你的需求。

方法二：用状态过滤控制Effect激活 #

在懒加载模块的状态里维护一个「模块激活状态」，Effect只在激活状态下处理Action：

1. 先定义控制激活状态的Action和Reducer：

// Action定义
const featureActions = createActionGroup({
  source: 'FeatureModule',
  events: {
    'Set Module Active': props<{ active: boolean }>(),
  },
});

// Reducer维护激活状态
interface FeatureState {
  isActive: boolean;
}

const initialState: FeatureState = { isActive: false };

const featureReducer = createReducer(
  initialState,
  on(featureActions.setModuleActive, (state, { active }) => ({
    ...state,
    isActive: active
  }))
);

2. 在Effect里结合激活状态过滤：

@Injectable()
export class FeatureEffects {
  afterSomeAuthLogicEffect$ = createEffect(() => 
    this.actions$.pipe(
      ofType(authActions.someAuthSuccess),
      // 获取当前模块的激活状态
      withLatestFrom(this.store.select(selectFeatureIsActive)),
      // 只有激活时才处理Action
      filter(([_, isActive]) => isActive),
      // 业务逻辑
      map(() => featureActions.handleAuthSuccess())
    )
  );

  constructor(private actions$: Actions, private store: Store<FeatureState>) {}
}

3. 最后在路由守卫里，进入路由时dispatchsetModuleActive(true)，退出时dispatchsetModuleActive(false)。

方法三：手动管理Effect订阅 #

如果不想改动Effect的结构，可以把Effect的订阅逻辑抽成方法，手动在路由进入时初始化，退出时销毁：

@Injectable()
export class FeatureEffects {
  private authSubscription?: Subscription;

  constructor(private actions$: Actions, private store: Store) {}

  // 初始化订阅
  initAuthListener() {
    this.authSubscription = this.actions$.pipe(
      ofType(authActions.someAuthSuccess),
      // 业务逻辑
      map(() => featureActions.handleAuthSuccess())
    ).subscribe(action => this.store.dispatch(action));
  }

  // 销毁订阅
  destroyAuthListener() {
    this.authSubscription?.unsubscribe();
  }
}

然后在路由守卫里调用这两个方法：

@Injectable()
export class FeatureRouteGuard implements CanActivate, CanDeactivate<unknown> {
  constructor(private featureEffects: FeatureEffects) {}

  canActivate(): boolean {
    this.featureEffects.initAuthListener();
    return true;
  }

  canDeactivate(): boolean {
    this.featureEffects.destroyAuthListener();
    return true;
  }
}

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