如何解决状态A与B互相引用Selector导致的初始化错误？

这个问题我之前在使用NgRx开发时也碰到过，核心原因是TypeScript类的初始化顺序限制：当两个State类在@Selector装饰器里直接互相引用对方类时，其中一个类在初始化阶段，另一个类还未完成定义，从而触发Cannot access 'StateA' before initialization的错误。下面给你几个可行的解决方案，按推荐优先级排序：

1. 使用状态名称字符串代替类引用（最推荐） #

NgRx的@Selector装饰器支持直接传入状态的名称字符串（就是你在@State装饰器里定义的name字段），而不是依赖类本身的引用。这种方式完全绕开了类之间的直接循环依赖，初始化时不会再报错。

修改后的代码示例：

State A #

@Injectable({ providedIn: "root" })
@State<{x: number;}>({ name: "stateA", defaults: {x: 0} })
export class StateA {
  // 用状态名称"stateB"代替StateB类引用
  @Selector(['stateB'])
  public static someSelector(stateA, stateB) {
    // 你的业务逻辑，比如 return stateA.x + stateB.y;
  }
}

State B #

@Injectable({ providedIn: "root" })
@State<{y: number;}>({ name: "stateB", defaults: {y: 0} })
export class StateB {
  // 用状态名称"stateA"代替StateA类引用
  @Selector(['stateA'])
  public static someSelector(stateB, stateA) {
    // 你的业务逻辑
  }
}

原理：NgRx会在运行时根据状态名称从Store中找到对应的状态切片，不需要依赖类的静态引用，完美规避了初始化顺序问题，代码也更简洁直观。

2. 抽离共享的跨状态Selector（架构优化方案） #

如果两个状态的交叉逻辑比较多，建议把这些跨状态的Selector抽离到独立的文件中，让两个State类保持单一职责，彻底解耦依赖关系。

示例步骤：

1. 创建shared.selectors.ts文件：

import { createSelector } from '@ngrx/store';

// 先定义获取两个状态切片的基础Selector
const selectStateA = (state) => state.stateA;
const selectStateB = (state) => state.stateB;

// 定义跨状态的组合Selector
export const selectCombinedValue = createSelector(
  selectStateA,
  selectStateB,
  (stateA, stateB) => {
    // 这里写原本在两个State类的someSelector里的逻辑
    return stateA.x * stateB.y;
  }
);

2. 在需要使用该逻辑的组件/服务中直接导入这个共享Selector即可，StateA和StateB类里的someSelector可以直接移除，不需要再互相引用。

优势：这种方式符合单一职责原则，把跨状态的逻辑集中管理，代码结构更清晰，也从根源上避免了循环引用问题。

3. 使用forwardRef延迟类引用（备选方案） #

如果因为某些原因必须保留State类内部的Selector，可以使用Angular提供的forwardRef来延迟类的引用解析，让TypeScript在运行时才去查找对应的类，从而绕过初始化顺序的限制。

修改后的代码示例：

State A #

import { forwardRef } from '@angular/core';

@Injectable({ providedIn: "root" })
@State<{x: number;}>({ name: "stateA", defaults: {x: 0} })
export class StateA {
  @Selector([forwardRef(() => StateB)])
  public static someSelector(stateA, stateB) {
    // 你的业务逻辑
  }
}

State B #

import { forwardRef } from '@angular/core';

@Injectable({ providedIn: "root" })
@State<{y: number;}>({ name: "stateB", defaults: {y: 0} })
export class StateB {
  @Selector([forwardRef(() => StateA)])
  public static someSelector(stateB, stateA) {
    // 你的业务逻辑
  }
}

注意：这种方式虽然能解决问题，但会让代码稍微复杂，而且不如前两种方案直观，所以只推荐在无法重构代码的场景下使用。

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