如何从Angular State中获取actionsObserver的值

你直接访问this.store.select(selectUser).actionsObserver._value.payload的做法完全错误，原因如下：

• store.select()返回的是Observable类型，actionsObserver是Observable的内部私有属性，不属于对外暴露的API，TypeScript的类型检查会直接拦截这种非法访问。
• 依赖框架内部实现细节的写法极度脆弱，NgRx版本迭代后内部结构随时可能变化，导致代码直接失效。

正确获取状态数据的两种方式 #

1. Angular模板中使用async管道（推荐） #

利用async管道自动处理订阅与取消订阅，避免内存泄漏，写法简洁：

<!-- 模板文件 -->
<div *ngIf="user$ | async as user">
  用户ID: {{ user.id }}
  更新时间: {{ user.updatedAt }}
</div>

// 组件类文件
user$ = this.store.select(selectUser);

2. 手动订阅Observable（适用于组件类内数据处理） #

如果需要在组件逻辑中处理状态数据，可手动订阅，但必须在组件销毁时取消订阅：

import { Subscription } from 'rxjs';

private userSub!: Subscription;

ngOnInit() {
  this.userSub = this.store.select(selectUser).subscribe(user => {
    // 此处获取到的user就是selectUser对应的状态数据
    console.log('用户状态:', user);
  });
}

ngOnDestroy() {
  this.userSub.unsubscribe();
}

关于控制台看到的actionsObserver #

你在控制台看到的actionsObserver是NgRx Observable实例的内部调试属性，用于框架自身跟踪action流，并非提供给开发者调用的公开API，绝对不要依赖它来获取状态。

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