如何在Angular 13中集成redux-devtools并解决动作丢失问题？

一、修复Redux DevTools历史记录不完整的问题 #

你提到在扩展里设置history值没用，确实需要在NgRX的代码配置里直接指定历史记录上限：

在你的根模块（一般是AppModule）里，配置StoreDevtoolsModule时加上maxAge参数，这个值会覆盖扩展的默认设置，确保所有动作都被记录：

import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { environment } from '../environments/environment';
import { reducers } from './store/reducers'; // 你的reducer集合

@NgModule({
  imports: [
    StoreModule.forRoot(reducers, {
      runtimeChecks: {
        strictStateImmutability: true,
        strictActionImmutability: true,
      },
    }),
    StoreDevtoolsModule.instrument({
      maxAge: 100, // 按需设置历史记录条数，比如100条足够覆盖大部分场景
      logOnly: environment.production, // 生产环境只允许记录，禁止调试操作
    }),
  ],
})
export class AppModule {}

配置后重启应用，DevTools就能完整显示所有触发的动作了，方便你排查竞态条件的根源。

二、排查动作触发两次的竞态条件 #

结合完整的DevTools记录，按以下步骤排查：

• 检查订阅重复问题：组件或服务里如果手动订阅了Observable（比如从Store获取数据的select），有没有在ngOnDestroy里取消订阅？或者是不是同时用了async管道和手动订阅，导致同一逻辑触发两次动作？
• Effect操作符误用：如果动作是在Effect里触发的，看看是不是用了mergeMap/concatMap这类不会取消前序请求的操作符？换成switchMap可以在新请求发起时取消之前未完成的请求，避免重复触发动作；如果只需要执行一次，也可以加take(1)限制。
• 触发源重复：检查动作的分发位置，比如路由守卫、组件生命周期钩子（ngOnInit/ngAfterViewInit）是不是被意外触发了两次？比如路由跳转时守卫重复执行，或者组件被多次初始化。
• DevTools时间旅行验证：用DevTools的回放功能，一步步看动作触发的顺序，确认是同一个动作被分发两次，还是不同的触发逻辑导致的重复动作，定位到具体的代码位置。

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