无法取消NGRX Store订阅：组件销毁后日志仍重复输出

首先纠正你的误解：浏览器重载/关闭重开后，所有JS内存都会被清空，之前的订阅早就不存在了，所以日志重复输出不是因为订阅没取消，核心原因是你的ngrx store数据可能被持久化了，每次页面加载后store会恢复之前的状态，导致新组件实例的订阅再次触发逻辑。

排查步骤 #

1. 检查store持久化配置
   查看你的根模块（通常是app.module.ts）中StoreModule的配置，是否使用了@ngrx/store-localstorage或类似的持久化中间件。比如：

   StoreModule.forRoot(reducers, {
     metaReducers: [localStorageSyncReducer], // 这里就是持久化的配置
   })
   

   如果存在这类配置，说明tradeEntities的数据会被存在localStorage/sessionStorage中，每次页面刷新都会恢复到store里，导致组件初始化时的订阅触发日志。

2. 验证deleteTrade的reducer逻辑
   检查处理deleteTrade动作的reducer是否正确删除了trade实体。使用ngrx/entity的正确写法应该是：

   import { createReducer, on } from '@ngrx/store';
   import { tradeAdapter, initialState } from './trade.state';
   import * as TradeActions from './trade.actions';
   
   export const tradeReducer = createReducer(
     initialState,
     on(TradeActions.deleteTrade, (state, { TradeId }) => {
       return tradeAdapter.removeOne(TradeId, state); // 确保用removeOne正确删除
     })
   );
   

   如果reducer没正确删除数据，store里的trade会一直存在，每次组件加载都会触发订阅逻辑。

解决方法 #

方法一：排除trade数据的持久化 #

如果不需要持久化trade相关数据，在持久化配置中排除对应的store节点。比如用@ngrx/store-localstorage时，只指定需要持久化的key：

export function localStorageSyncReducer(reducer: ActionReducer<RootState>) {
  return localStorageSync({
    keys: ['user', 'appSettings'], // 只持久化这些业务无关的节点，排除trade
    rehydrate: true,
  })(reducer);
}

方法二：优化订阅逻辑，避免初始加载触发 #

如果确实需要持久化，但不想在组件初始化时处理旧数据，可以在订阅中加入过滤条件，比如只处理组件初始化后新增的数据：

private destroy$ = new Subject<void>();
private isComponentInitialized = false;

constructor(private store: Store<State>) {
  this.formConfiguration();

  this.store.select(selectTradeEntities)
    .pipe(
      skipWhile(() => !this.isComponentInitialized), // 跳过初始化前的状态
      filter(tradeDictionary => {
        const tradeFromStore = Object.values(tradeDictionary)[0];
        return tradeFromStore != null && tradeFromStore.Stage === 2;
      }),
      takeUntil(this.destroy$) // 用takeUntil替代手动unsubscribe，更安全
    )
    .subscribe((tradeDictionary) => {
      const tradeFromStore = Object.values(tradeDictionary)[0];
      console.log('remove from panel draft stage 2');
      this.tradeDraftPanelEmitter.emit(tradeFromStore.TradeId);
      this.store.dispatch(deleteTrade({ TradeId: tradeFromStore.TradeId }));
    });
}

ngOnInit() {
  this.isComponentInitialized = true;
}

ngOnDestroy(): void {
  this.destroy$.next();
  this.destroy$.complete();
}

方法三：使用async pipe替代手动订阅 #

Angular的async pipe会自动管理订阅的生命周期，避免手动unsubscribe可能出现的遗漏：

// 组件类中定义可观察对象
private destroy$ = new Subject<void>();
tradeEntities$ = this.store.select(selectTradeEntities).pipe(
  filter(tradeDictionary => {
    const trade = Object.values(tradeDictionary)[0];
    return trade != null && trade.Stage === 2;
  })
);

ngOnInit() {
  this.tradeEntities$
    .pipe(takeUntil(this.destroy$))
    .subscribe(tradeDictionary => {
      // 处理逻辑
      const tradeFromStore = Object.values(tradeDictionary)[0];
      console.log('remove from panel draft stage 2');
      this.tradeDraftPanelEmitter.emit(tradeFromStore.TradeId);
      this.store.dispatch(deleteTrade({ TradeId: tradeFromStore.TradeId }));
    });
}

ngOnDestroy(): void {
  this.destroy$.next();
  this.destroy$.complete();
}

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