Ngxs @Select装饰器订阅时返回undefined问题排查

问题背景 #

我尝试读取NGXS状态中存储的labels，相关代码及遇到的错误如下：

状态文件 #

export class LabelStateModel {
  labels: LabelConfig = {};
}

@State<LabelStateModel>({
  name: 'labels',
  defaults: {
    labels: {},
  },
})
@Injectable()
export class LabelState {
  constructor(
    private realLabelService: LabelService,
    private fakeLabelService: FakeLabelService,
    @Inject('environment') private environment: any
  ) {}

  get labelService(): LabelService | FakeLabelService {
    return this.environment.isMockEnabled
      ? this.fakeLabelService
      : this.realLabelService;
  }

  @Selector()
  static getLabels(state: LabelStateModel) {
    return state.labels;
  }

  @Action(GetLabels)
  getLabels({ getState, setState }: StateContext<LabelStateModel>) {
    return this.labelService.getLabels().pipe(
      tap((labelConfig) => {
        try {
          labelConfigSchema.parse(labelConfig);
        } catch (error) {
          throw new Error(`Data validation error: ${error}`);
        }
        const state = getState();
        setState({
          ...state,
          labels: labelConfig,
        });
      })
    );
  }
}

动作文件 #

export class GetLabels {
  static readonly type = '[Label] Get';
}

错误信息 #

测试TextService时触发以下错误：

ERROR TypeError: Cannot read properties of undefined (reading 'subscribe')

初始TextService代码 #

@Injectable({
  providedIn: 'root',
})
export class TextService {
  @Select(LabelState.getLabels) labels$!: Observable<LabelConfig>;

  convert(data: GeneralText[]): Observable<LabelConfig> {
    // 此处触发上述错误
    this.labels$.subscribe((labels) => {
      console.log('labels', labels);
    });

    return of({ labelId: 'L_REF_ID' });
  }
}

修复后的工作代码 #

通过直接注入Store并手动选择状态的方式实现了功能：

@Injectable({
  providedIn: 'root',
})
export class TextService {
  constructor(private store: Store) {}

  // 注释掉原@Select装饰器的代码
  // @Select(LabelState.getLabels) labels$!: Observable<LabelConfig>;

  convert(data: GeneralText[]): Observable<LabelConfig> {
    const labels$ = this.store.select(
      (state) => state.labels.labels
    ) as Observable<LabelConfig>;

    labels$.subscribe((labels) => {
      console.log('labels', labels);
    });

    return of({ labelId: 'L_REF_ID' });
  }
}

核心疑问 #

为什么使用@Select(LabelState.getLabels)装饰器无法正常工作？

原因分析 #

1. 装饰器初始化时机滞后：@Select装饰器依赖NGXS的注入系统完成初始化，才能给labels$赋值。如果TextService在NGXS模块完全初始化前就被实例化（比如通过APP_INITIALIZER提前调用），此时labels$还未被正确赋值，就会出现undefined。
2. 缺少NGXS必要模块导入：确保应用模块中已经导入NgxsModule.forRoot([LabelState])和NgxsSelectModule——@Select装饰器必须依赖NgxsSelectModule才能正常工作，若未导入，装饰器无法完成Observable的注入。
3. 非空断言的风险：代码中使用!断言labels$非空，但如果装饰器初始化失败，这个断言就会失效，导致调用subscribe时触发undefined错误。

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