Angular(TypeScript)中无需订阅获取NGRX Store值的方法

针对你需要在TypeScript组件内获取NGRX Store中的值作为后端请求参数的需求，有两种常用方案：

方案1：使用store.selectSnapshot() #

NGRX Store提供了selectSnapshot()方法，可以同步获取当前状态的快照，直接拿到对应的值，无需订阅Observable。

代码示例：

// 在组件方法中直接调用
const cardNickname = this.store.selectSnapshot(selectCardNickname);

// 直接用该值调用后端服务
this.yourBackendService.sendRequest({ nickname: cardNickname }).subscribe({
  next: (response) => { /* 处理响应 */ },
  error: (err) => { /* 处理错误 */ }
});

注意事项：

• 如果选择器依赖的状态还未初始化（比如页面加载初期状态还没被设置），selectSnapshot()可能返回undefined，建议提前做空值校验，或者确保状态在调用前已被正确初始化。
• 该方法获取的是调用瞬间的状态快照，如果后续状态更新，不会自动刷新这个值。

方案2：使用RxJS的firstValueFrom（异步方式） #

如果需要确保能拿到最新的状态值（比如状态可能还在异步初始化中），可以用RxJS的firstValueFrom将Observable转换为Promise，结合async/await实现类似同步的写法。

代码示例：

// 定义异步方法
async callBackendService() {
  // 取第一个发射的状态值，避免Observable一直处于活跃状态
  const cardNickname = await firstValueFrom(
    this.store.select(selectCardNickname).pipe(take(1))
  );

  // 调用后端服务
  const response = await firstValueFrom(
    this.yourBackendService.sendRequest({ nickname: cardNickname })
  );
  // 处理响应
}

注意事项：

• 此方法需要在async函数中使用，因为await只能在异步函数内生效。
• 加上pipe(take(1))是为了确保Observable完成，避免firstValueFrom一直处于等待状态（NGRX的select默认是持续发射值的）。

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