在NGXS状态管理中，能否在状态B的选择器中使用状态A的数据？

当然可以！在NGXS里，在状态B的选择器中使用状态A的数据是完全可行的，而且这是处理跨状态数据组合的常用场景，刚好匹配你现在涉及Section和QuestionFlow的需求。下面给你两种最常用的实现方式：

方式一：直接在选择器中获取其他状态的快照 #

你可以在目标选择器里，通过另一个状态类的静态选择器方法，结合store.selectSnapshot()来获取状态A的实时数据。比如假设你的状态A是SectionState，状态B是QuestionFlowState，可以这么写：

import { Selector, State, Store } from '@ngxs/store';
import { SectionState } from './section.state';
import { QuestionFlow } from './models';

@State<QuestionFlow[]>({
  name: 'questionFlows'
})
export class QuestionFlowState {
  constructor(private store: Store) {}

  @Selector()
  static getCompletedSectionFlows(state: QuestionFlow[]) {
    // 获取SectionState的全部数据快照
    const allSections = this.store.selectSnapshot(SectionState.getSections);
    // 筛选出关联已完成Section的QuestionFlow
    return state.filter(flow => {
      const matchedSection = allSections.find(section => section.id === flow.parentId);
      return matchedSection && matchedSection.completedQuestions === matchedSection.totalQuestions;
    });
  }
}

方式二：用createSelector组合多个状态的选择器 #

NGXS提供了createSelector工具，可以更优雅地组合多个状态的选择器，同时还能享受*memoized（缓存优化）*的性能优势，避免重复计算。这种方式更推荐，尤其是当你需要多次组合跨状态数据时：

import { createSelector } from '@ngxs/store';
import { SectionState } from './section.state';
import { QuestionFlowState } from './question-flow.state';
import { Section, QuestionFlow } from './models';

// 先定义获取两个状态的基础选择器
const selectAllSections = (state: any) => state.sections as Section[];
const selectAllQuestionFlows = (state: any) => state.questionFlows as QuestionFlow[];

// 组合选择器：根据选中的Section筛选对应的QuestionFlow
export const selectSelectedSectionFlows = createSelector(
  [selectAllSections, selectAllQuestionFlows],
  (sections, questionFlows) => {
    // 找到当前选中的Section
    const selectedSection = sections.find(section => section.selected);
    if (!selectedSection) return [];
    // 返回该Section关联的所有QuestionFlow
    return questionFlows.filter(flow => flow.parentId === selectedSection.id);
  }
);

在组件中使用这个组合选择器 #

在组件里，你可以直接用@Select装饰器订阅这个组合选择器的结果：

import { Component } from '@angular/core';
import { Select } from '@ngxs/store';
import { Observable } from 'rxjs';
import { selectSelectedSectionFlows } from './selectors';
import { QuestionFlow } from './models';

@Component({
  selector: 'app-section-flows',
  template: `
    <div *ngFor="let flow of selectedFlows$ | async">
      {{ flow.id }} - 关联Section: {{ flow.parentId }}
    </div>
  `
})
export class SectionFlowsComponent {
  @Select(selectSelectedSectionFlows) selectedFlows$!: Observable<QuestionFlow[]>;
}

这两种方式都能完美实现“在状态B的选择器中使用状态A的数据”的需求，其中第二种方式更符合NGXS的最佳实践，因为它的缓存机制能提升性能，代码结构也更清晰。

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