Angular路由更新路径时NGXS Actions重复触发问题求助

问题描述 #

使用NGXS Actions时，路由路径变更（例如从/news/today切换至/news/labels/1）会导致Action被重复分发/处理，但仅变更参数值时不会触发该问题。

应用工作流程 #

1. 点击按钮更新URL路径：

this.router.navigate([uri], extras);

2. 中央组件监听路径变化，分发NGXS Action：

combineLatest([cfg$, url$, urlParams$, queryParams$])
  .pipe(
    filter((vals) => vals.every(isNotNull)),
    map(([cfg, url, urlParams, queryParams]) =>
      this.createRequest(cfg!, url, urlParams, queryParams)
    )
  )
  .subscribe((request) => this.store.dispatch(new GetNewsPosts(request)));

3. NGXS Action处理HTTP请求加载数据：

@Action(GetNewsPosts)
getNewsPosts(ctx: StateContext<NewsItemsModel>, { request }: GetNewsPosts) {
  console.log('GetNewsPosts', request);
  ctx.setState({ loadingFirstPage: true, pages: [], request });

  const response$ = this.service.getPosts(0, request); 
  return handleGetFirstPageResponse(ctx, dataName, response$); // 返回Observable
}

版本信息 #

• Angular 15.1.5
• @ngxs/store: 3.8.1

排查方向与调试建议 #

• 检查订阅是否重复创建
  路径变更时，若中央组件因路由复用策略被销毁重建，未取消的旧订阅会与新订阅同时触发。建议用Angular 15+的DestroyRef配合takeUntilDestroyed操作符确保仅存在一个有效订阅：

  // 组件中注入DestroyRef
  constructor(private destroyRef: DestroyRef) {}
  
  // 修改订阅逻辑
  combineLatest([cfg$, url$, urlParams$, queryParams$])
    .pipe(
      filter((vals) => vals.every(isNotNull)),
      map(([cfg, url, urlParams, queryParams]) => this.createRequest(cfg!, url, urlParams, queryParams)),
      takeUntilDestroyed(this.destroyRef)
    )
    .subscribe((request) => this.store.dispatch(new GetNewsPosts(request)));
  

• 追踪Observable的重复发射
  在combineLatest流中添加日志，查看是否有重复的输入值或重复生成的请求对象：

  combineLatest([cfg$, url$, urlParams$, queryParams$])
    .pipe(
      tap(vals => console.log('当前监听值:', vals)),
      filter((vals) => vals.every(isNotNull)),
      map(([cfg, url, urlParams, queryParams]) => this.createRequest(cfg!, url, urlParams, queryParams)),
      tap(request => console.log('生成的请求:', request))
    )
    .subscribe((request) => this.store.dispatch(new GetNewsPosts(request)));
  

  若发现相同请求被多次生成，可通过distinctUntilChanged过滤重复请求：

  distinctUntilChanged((prev, curr) => {
    // 根据业务需求对比请求的关键属性，判断是否为重复请求
    return prev.path === curr.path && JSON.stringify(prev.params) === JSON.stringify(curr.params);
  })
  

• 确认Action的触发次数
  查看GetNewsPosts Action中的console.log输出次数：

  • 若日志打印多次，说明Action被重复分发，问题出在订阅逻辑；
  • 若日志仅打印一次但数据加载多次，需检查是否有多个State注册了该Action，或State被重复实例化。

• 检查路由复用策略
  确认Angular路由是否在路径变更时销毁重建中央组件。可在组件的ngOnInit和ngOnDestroy中添加日志，观察组件生命周期是否异常触发。若组件重复创建，需确保每次创建时都正确清理旧订阅。

内容的提问来源于stack exchange，提问作者Błażej