如何在NgRx中获取动作执行完成前后的状态差异？

嘿，很高兴能帮你解决这个NgRx状态差异的问题——不管是追踪特定动作带来的变化，还是对比前后状态，这两个需求在调试、日志记录或者触发后续操作时都特别实用。下面分场景给你详细讲：

一、获取另一个动作执行完成后的状态差异 #

当你想知道某个特定动作执行后，状态发生了哪些变化，可以试试这两种方法：

方法1：利用Effect监听动作并对比状态 #

因为NgRx的Reducer是同步执行的，当Effect接收到动作时，状态已经被Reducer更新了。所以你可以在触发目标动作前先保存当前状态快照，然后在Effect里监听动作完成后，获取新状态并对比：

// 在组件或服务里
const previousState = this.store.selectSnapshot(state => state.yourFeature);
this.store.dispatch(yourTargetAction());

// 在对应的Effect里
yourEffect$ = createEffect(() => 
  this.actions$.pipe(
    ofType(yourTargetActionSuccess), // 假设动作有成功回调
    withLatestFrom(this.store.select(state => state.yourFeature)),
    tap(([action, newState]) => {
      // 对比previousState和newState，拿到差异
      const stateDiff = this.calculateDiff(previousState, newState);
      console.log('动作执行后的状态差异:', stateDiff);
    })
  )
);

如果你的动作没有成功回调，也可以直接监听动作本身（注意：此时状态已经是更新后的了，所以需要提前保存旧状态）。

方法2：用Meta-Reducer拦截动作（更全局的方式） #

Meta-Reducer可以在所有Reducer执行前后拦截动作，所以能轻松拿到动作执行前后的状态，适合全局记录所有动作的状态变化，或者针对特定动作做差异计算：

export function stateDiffMetaReducer(reducer: ActionReducer<State>): ActionReducer<State> {
  return (previousState, action) => {
    // 只针对你关心的动作做处理
    if (action.type === '[YourFeature] Target Action') {
      const nextState = reducer(previousState, action);
      // 计算差异
      const diff = calculateStateDiff(previousState, nextState);
      console.log(`动作 ${action.type} 带来的状态差异:`, diff);
      return nextState;
    }
    return reducer(previousState, action);
  };
}

// 在Store模块里注册这个Meta-Reducer
StoreModule.forRoot(reducers, {
  metaReducers: [stateDiffMetaReducer]
})

这里的calculateStateDiff需要你自己实现，比如用lodash的differenceWith或者手动对比对象属性，根据你的状态结构来写。

二、获取NgRx中先前状态与当前状态的差异 #

如果是想每次状态变化时都对比前后状态，而不是针对特定动作，这两种方法更合适：

方法1：在订阅状态时保存上一次状态 #

在组件或服务里订阅状态，每次新状态过来时和上一次的状态对比：

private previousState: YourFeatureState;

ngOnInit() {
  this.store.select(state => state.yourFeature)
    .pipe(takeUntil(this.destroy$))
    .subscribe(currentState => {
      if (this.previousState) {
        const diff = this.calculateDiff(this.previousState, currentState);
        console.log('前后状态差异:', diff);
      }
      this.previousState = {...currentState}; // 浅拷贝，避免引用问题
    });
}

注意要做状态的拷贝，不然previousState会和currentState指向同一个对象，对比不出差异。

方法2：用Meta-Reducer全局监听所有状态变化 #

和上面的Meta-Reducer思路类似，但这次不限制特定动作，每次状态变化都计算差异：

export function globalStateDiffMetaReducer(reducer: ActionReducer<State>): ActionReducer<State> {
  return (previousState, action) => {
    const nextState = reducer(previousState, action);
    // 初始状态时previousState是undefined，跳过
    if (previousState) {
      const diff = calculateStateDiff(previousState, nextState);
      console.log(`动作 ${action.type} 触发的状态差异:`, diff);
    }
    return nextState;
  };
}

这个方法适合全局日志或者监控所有状态变化的场景。

补充：状态差异计算的小技巧 #

如果你的状态是复杂对象，手动对比属性太麻烦，可以用第三方库简化，比如：

• lodash的isEqual和differenceWith
• deep-object-diff库的diff方法（直接返回差异对象）

比如用deep-object-diff：

import { diff } from 'deep-object-diff';

const stateDiff = diff(previousState, currentState);

这样就能直接得到两个状态之间的差异对象，非常方便。

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