订阅NgRx Selector返回Undefined，请求问题排查帮助

看起来你遇到的问题主要来自几个代码逻辑上的小错误，还有对NgRx Observable订阅时机的理解偏差，我来帮你拆解一下：

首先看你的代码里的几个关键问题：

1. 错误的条件判断逻辑 #

你写的if (!this.position$ === undefined)完全不符合预期：

• this.AppStore.select()永远会返回一个Observable对象，不可能是undefined，所以这个判断本身就没有意义。
• 运算符优先级问题：!的优先级比===高，实际执行的是(!this.position$) === undefined，而!Observable实例的结果是false，false === undefined永远为false，这个条件块其实根本没生效。

2. 立即取消订阅导致未接收到有效数据 #

你在订阅后马上调用this.mySubscription.unsubscribe()，这会导致Observable还没来得及发出store里的实际数据就被取消订阅了。NgRx的store在初始化时，如果对应的state没有设置初始值，Selector会先发出undefined，然后才会发出实际的状态数据，但你立即取消订阅，只能拿到这个初始的undefined，自然会触发Object.keys(undefined)的报错。

3. State初始值缺失（潜在原因） #

子组件能正常工作，大概率是因为子组件用了async管道——async管道会自动等待Observable发出有效值，并且处理订阅/取消订阅的时机。而你的父组件手动订阅，没有处理初始undefined的情况，也没等store里的状态更新就取消了订阅。

修复后的代码示例 #

我给你调整了代码，解决了这些问题：

import { take } from 'rxjs/operators';
import { Subscription } from 'rxjs';

size: number = 0; 
mySubscription?: Subscription; 

constructor(private AppStore: Store<Store.NewState>) { } 

ngOnInit() { 
  // 方案1：如果只需要获取一次当前状态值，用take(1)自动完成订阅
  this.mySubscription = this.AppStore.select(positionSelectors.selectPositionState)
    .pipe(take(1))
    .subscribe((resp) => { 
      // 处理resp可能为undefined的情况，给默认空对象
      const targetData = resp || {};
      this.size = Object.keys(targetData).length; 
    }); 

  // 方案2：如果需要持续监听状态变化，不要用take(1)，而是在组件销毁时取消订阅
  // this.mySubscription = this.AppStore.select(positionSelectors.selectPositionState)
  //   .subscribe((resp) => { 
  //     const targetData = resp || {};
  //     this.size = Object.keys(targetData).length; 
  //   }); 
}

// 如果用方案2，记得在组件销毁时取消订阅，防止内存泄漏
ngOnDestroy() {
  this.mySubscription?.unsubscribe();
}

额外建议：给State设置初始值 #

在对应的reducer里，给positionState设置一个合理的初始值（比如空对象），这样Selector一开始就会返回有效值，不用在订阅里做兜底处理：

// 示例reducer代码
const initialPositionState = {}; // 初始化为空对象

export function positionReducer(state = initialPositionState, action: PositionActions) {
  // ...你的reducer逻辑
}

这样不管是父组件订阅还是子组件使用async管道，都不会遇到undefined的问题啦。

内容的提问来源于stack exchange，提问作者Haq.H