NgRx如何拦截所有dispatch到Store的Action并监听状态变更

问题1：日志顺序错误&重复打印 #

原因分析 #

1. 你在select的投影函数内执行打印逻辑，而select会在Store初始化推送默认状态时就触发第一次执行，这是你第一次无意义的Got state from store日志的来源。
2. NgRx默认执行流为：dispatch Action → Reducer执行更新状态 → Action流入Effect处理，因此你用Effect打印拦截日志的时机本身就晚于状态更新，自然出现日志顺序倒置。
3. 无过滤的Store状态订阅会响应所有状态变更，只要其他业务逻辑修改了状态就会触发重复打印。

最优解决方案：使用Meta-Reducer实现需求 #

Meta-Reducer是NgRx提供的高阶Reducer包装器，所有Action会先经过Meta-Reducer再传入正式Reducer，天生满足你要的执行顺序，也不需要单独维护Action列表，完全符合你的两个需求。

步骤1：定义Meta-Reducer

新建meta-reducers.ts文件：

import { ActionReducer, MetaReducer } from '@ngrx/store';

export function actionInterceptorMetaReducer(reducer: ActionReducer<any>): ActionReducer<any> {
  return (state, action) => {
    // Action进入Reducer前先打印拦截日志
    console.log("Intercepting action...");
    // 执行原始Reducer更新状态
    const newState = reducer(state, action);
    // Reducer执行完成后打印状态更新日志
    console.log("Got state from store.");
    return newState;
  };
}

export const metaReducers: MetaReducer<any>[] = [actionInterceptorMetaReducer];

步骤2：注册Meta-Reducer

修改app.module.ts：

import { metaReducers } from './meta-reducers';

@NgModule({
  imports: [
    // 其他导入不变
    StoreModule.forRoot(/* 你的根Reducer */, { metaReducers }),
    // 原有的InterceptorEffects可以直接移除，不需要了
    EffectsModule.forRoot([/* 你的业务Effect列表 */]),
  ]
})
export class AppModule {}

修改后即可直接得到正确的日志顺序，也不会出现重复打印的问题。

问题2：无需手动维护Action列表的全量拦截方法 #

如果你坚持要用Effect实现拦截，直接去掉ofType调用即可，Actions流本身就是所有被dispatch的Action的集合，ofType只是过滤算子，不需要就可以删掉：

// 修正后的interceptor.effect.ts
@Injectable({ providedIn: "root" })
export class InterceptorEffects {
    private readonly _interceptAllAction$ = createEffect(() =>
        this._actions.pipe(
            // 删掉ofType，所有Action都会流入
            tap(() => console.log("Intercepting action..."))
        )
        , { dispatch: false } );

    constructor(private _actions: Actions) {}
}

如果要解决Effect实现的日志顺序问题，统一把两个打印逻辑放到Effect中即可：

@Injectable({ providedIn: "root" })
export class InterceptorEffects {
    private readonly _interceptAllAction$ = createEffect(() =>
        this._actions.pipe(
            tap(() => console.log("Intercepting action...")),
            // 关联最新的Store状态
            withLatestFrom(this._store),
            tap(() => console.log("Got state from store."))
        )
        , { dispatch: false } );

    constructor(private _actions: Actions, private _store: Store) {}
}

同时移除app.component.ts中原来的状态订阅逻辑，避免重复打印。

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