如何在组件中实现ngxsOnChanges，解决状态属性同时变更触发多次事件问题

你可以通过以下两种方案实现合并监听，避免多属性同时变更时重复触发回调：

方案1：组件内监听状态切片，自定义去重逻辑 #

• 不单独监听单个属性，改为监听包含目标属性的整个状态切片，通过distinctUntilChanged自定义比对规则实现单次触发
  示例代码：

import { Store } from '@ngxs/store';
import { MyState, MyStateModel } from './my.state';
import { distinctUntilChanged, map } from 'rxjs';

@Component({...})
export class MyComponent {
  constructor(private store: Store) {
    this.store.select(MyState)
      .pipe(
        // 仅提取需要关注的两个属性
        map((state: MyStateModel) => ({ 
          propA: state.propA, 
          propB: state.propB 
        })),
        // 自定义比对逻辑：两个属性都未变更才跳过触发
        distinctUntilChanged((prev, curr) => 
          prev.propA === curr.propA && prev.propB === curr.propB
        )
      )
      .subscribe(({propA, propB}) => {
        // 无论单个/多个属性同时变更，仅触发一次回调
        this.handleMergedChange(propA, propB);
      });
  }

  handleMergedChange(propA: any, propB: any) {
    // 你的业务逻辑
  }
}

方案2：状态类内实现NgxsOnChanges钩子 #

NGXS 3.7+版本原生提供了NgxsOnChanges生命周期接口，会在每次状态变更完成后统一触发一次，你可以直接在状态类内完成合并监听：
示例代码：

import { State, NgxsOnChanges, NgxsSimpleChange } from '@ngxs/store';

export interface MyStateModel {
  propA: string;
  propB: number;
}

@State<MyStateModel>({
  name: 'myState',
  defaults: { propA: '', propB: 0 }
})
export class MyState implements NgxsOnChanges {
  ngxsOnChanges(change: NgxsSimpleChange<MyStateModel>): void {
    const prevState = change.previousValue;
    const currState = change.currentValue;
    // 仅当目标属性发生变更时执行业务逻辑
    if (prevState?.propA !== currState.propA || prevState?.propB !== currState.propB) {
      console.log('属性变更', {
        newPropA: currState.propA,
        newPropB: currState.propB
      })
    }
  }

  // 其他Action处理逻辑
}

如果你使用的NGXS版本低于3.7，建议先升级到稳定版即可使用原生NgxsOnChanges能力。

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