NgRx Store使用时数据获取异常及选择器用法疑问

嵌套字段读取问题解决 #

你需要额外读取data['shop']才能拿到实际数据，是因为当前的getCart选择器没有正确提取目标字段，或者feature reducer注册的层级和选择器定义不匹配。
优化步骤如下：

1. 确认feature reducer注册的key，和选择器使用的key保持一致。比如你定义feature选择器时用的key是'myshop'，那么注册逻辑应该类似：

// 对应模块的imports配置中
StoreModule.forFeature('myshop', shopReducer)

2. 修改getCart选择器，直接提取内部的shop字段，不需要在业务代码里做层级访问：

const shopFeatureState = createFeatureSelector<StoreState>('myshop');
// 直接在选择器层完成字段提取
export const getCart = createSelector(
  shopFeatureState,
  state => state.shop
);

调整后你在组件里调用store.pipe(select(getCart))拿到的就直接是shop对象，不需要额外嵌套读取。

选择器返回Observable的用法说明 #

这个用法完全正确。NgRx的store.select方法本身设计就是返回Observable对象，符合响应式编程的规范，当Store中对应数据发生变更时，会自动推送最新值。
实际使用有两种常见方案：

• 手动订阅：需要注意在组件销毁时取消订阅，避免内存泄漏

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

export class HomeComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();
  items = [];

  ngOnInit() {
    this.store.select(getItemsList)
      .pipe(takeUntil(this.destroy$))
      .subscribe(items => {
        this.items = items;
      });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

• 模板结合async管道（更推荐）：不需要手动处理订阅和销毁逻辑，Angular会自动管理

<!-- 组件模板代码 -->
<ul>
  <li *ngFor="let item of getItemsList | async">{{ item.name }}</li>
</ul>

内容的提问来源于stack exchange，提问作者Fábio