如何为Angular 13大型NgRx项目的选择器批量添加日志？

可以通过包装NgRx原生的createSelector函数实现统一日志注入，无需逐个修改现有选择器定义。以下是具体实现步骤：

1. 创建带日志的包装函数 #

新建工具文件（如src/app/core/selector-logger.ts），编写包装逻辑：

import { createSelector as ngrxCreateSelector, MemoizedSelector, Selector } from '@ngrx/store';
import { environment } from '../../environments/environment';

// 重载定义，匹配NgRx createSelector的参数结构
export function createSelectorWithLogging<State, Props, Result>(
  selector: Selector<State, Props>,
  projector: (props: Props) => Result,
  selectorName?: string
): MemoizedSelector<State, Result>;

export function createSelectorWithLogging<State, A, B, Result>(
  selector1: Selector<State, A>,
  selector2: Selector<State, B>,
  projector: (a: A, b: B) => Result,
  selectorName?: string
): MemoizedSelector<State, Result>;

// 支持更多参数的通用实现
export function createSelectorWithLogging(...args: any[]): any {
  let selectorName: string | undefined;
  let projector: Function;
  const selectors = args.slice(0, -1);

  // 分离名称参数（如果传入）
  if (typeof args[args.length - 1] === 'string') {
    selectorName = args.pop() as string;
    projector = args.pop() as Function;
  } else {
    projector = args.pop() as Function;
    // 默认使用投影函数名，或标记为未知选择器
    selectorName = projector.name || 'unknown-selector';
  }

  // 创建原生选择器
  const originalSelector = ngrxCreateSelector(...selectors, projector);

  // 包装选择器调用，添加日志
  const loggedSelector = (...selectorArgs: any[]) => {
    const result = originalSelector(...selectorArgs);
    // 仅开发环境打印日志
    if (!environment.production) {
      console.log(`Selector ${selectorName} fired! Result:`, result);
    }
    return result;
  };

  // 复制原生选择器的所有属性，保证NgRx内部逻辑正常运行
  Object.assign(loggedSelector, originalSelector);

  return loggedSelector as MemoizedSelector<any, any>;
}

2. 替换项目中的createSelector导入 #

将所有使用createSelector的文件中的导入替换为我们的包装函数：

// 原导入
// import { createSelector } from '@ngrx/store';

// 替换为
import { createSelectorWithLogging as createSelector } from '../core/selector-logger';

这样原有选择器定义无需修改，比如：

// 手动指定选择器名称（推荐，日志可读性更高）
export const selectUser = createSelector(selectAuthState, (state: AuthState) => state.user, 'selectUser');

// 或依赖投影函数名（需使用命名函数而非箭头函数）
export const selectUser = createSelector(selectAuthState, function selectUserProjector(state: AuthState) {
  return state.user;
});

3. 可选：全局覆盖（无需修改导入） #

如果不想逐个修改导入，可以在应用初始化时全局替换NgRx的createSelector，仅在开发环境启用：

在app.module.ts中添加：

import * as ngrxStore from '@ngrx/store';
import { createSelectorWithLogging } from './core/selector-logger';
import { environment } from '../environments/environment';

if (!environment.production) {
  // 全局替换原生createSelector
  (ngrxStore.createSelector as any) = createSelectorWithLogging;
}

注意事项 #

• 日志仅在开发环境打印，避免影响生产性能
• NgRx选择器是**记忆化（memoized）**的，日志只会在依赖状态变化、选择器重新计算时触发，符合性能分析需求
• 手动指定选择器名称能大幅提升日志可读性，建议优先使用这种方式

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