是否可以在状态 B 的选择器内使用来自状态 A 的数据？

Posted 2023-02-19

【中文标题】是否可以在状态 B 的选择器内使用来自状态 A 的数据？

【英文标题】：Is it possible to use data from state A inside a selector in state B?

【发布时间】：2018-09-27 09:49:24

【问题描述】：

我正在尝试将 Ngxs 作为状态管理系统，并遇到了一个我似乎无法弄清楚的特定用例。在这个用例中，我使用了两个 规范化 对象（为了便于阅读，我删除了一些不必要的字段）。

export interface Section 
  id: number;
  sequence: number;
  name: string;
  subName: string;
  totalQuestions: number;
  completedQuestions: number;
  selected: boolean;
  questionFlows: QuestionFlow[];


export interface QuestionFlow 
  id: number;
  contractId: number;
  parentId: number;
  subSectionId: number;
  path: string;
  question: string;
  type: string;
  answer: string;
  completed: boolean;
  sequenceNumber: number;
  selected: boolean;
  questionFlows: QuestionFlow[];

这两个对象位于不同的存储区。一个 SectionStore 和一个 QuestionFlowStore。状态模型如下：

export class SectionsStateModel 
  sections:  [id: number]: Section ;
  currentSection: Section;


export class QuestionFlowsStateModel 
  questionFlows:  [id: number]: QuestionFlow ;
  currentQuestionFlow: QuestionFlow;

现在我想在 QuestionFlowsState 中创建一个选择器，它返回属于 currentSection 的每个 questionFlow。是否可以在位于 QuestionFlowState 内的选择器内获取 currentSection，而 currentSection 位于 SectionState 内？我尝试了下面的代码（商店已满），但没有成功。

import  SectionsStateModel  from './sections.state';

@State<QuestionFlowsStateModel>(
  name: 'questionFlows',
  defaults: 
    questionFlows: ,
    currentQuestionFlow: null
  
)
export class QuestionFlowsState 
  @Selector()
  static getQuestionFlowsArrayFromCurrentSection(
    state: QuestionFlowsStateModel,
    sectionState: SectionsStateModel
  ) 
    const questionFlowsFromCurrentSection: QuestionFlow[] = [];

    sectionState.currentSection.questionFlows.forEach(questionFlow => 
      questionFlowsFromCurrentSection.push(state.questionFlows[+questionFlow]);
    );

    return questionFlowsFromCurrentSection;
  

如果问题中有任何遗漏/不清楚的地方，请告诉我。

编辑： After some back and forth with @Danny Blue 我们已经找到了添加父状态的解决方案，该状态将包含选择器所需数据的状态作为子状态（可以在 @State 装饰器中设置）。要访问这些儿童商店的数据，您需要致电 state.. 并且一切顺利。下面是解决我的问题的最终代码。

import  State, Selector  from '@ngxs/store';

import  SectionsState  from './sections.state';
import  QuestionFlowsState  from './question-flows.state';
import  QuestionFlow  from '../../contract-details.model';
import  SectionsStateModel  from './sections.state';
import  QuestionFlowsStateModel  from './question-flows.state';

@State(
  name: 'parent',
  children: [SectionsState, QuestionFlowsState]
)
export class ParentState 
  @Selector()
  static getParentFlowsArrayFromCurrentSection(
    state
  ) 
    const questionFlowsFromCurrentSection: QuestionFlow[] = [];

    state.sections.currentSection.questionFlows.forEach(questionFlow => 
      questionFlowsFromCurrentSection.push(
        state.questionFlows.questionFlows[+questionFlow]
      );
    );

    return questionFlowsFromCurrentSection;
  

【参考方案1】：

您可以在父状态类中添加选择器，使其可以访问两个子状态。

https://ngxs.gitbook.io/ngxs/advanced/sub-states

【讨论】：

你的意思是我应该添加另一个状态，将 SectionState 和 QuestionFlowState 都作为子项，还是只添加 QuestionFlowState 作为 SectionState 的子项？我尝试添加一个新状态，并在其中添加选择器，但这似乎并没有解决它。在 SectionState 中添加 QuestionFlowState 作为子项也是如此。

是的，我正在考虑添加一个新的状态类并让两个孩子都成为它。你能分享让他们成为孩子不起作用的代码吗？

我已经添加了我用来测试（我认为）你的答案的意思的代码。

因此，传递给选择器的参数将是一个具有两个属性的对象。不是两个参数

我已将代码编辑为只传递一个状态对象。但这似乎并不能解决问题。可能是它不起作用，因为我使用的数组对象不适用于子状态，根据：ngxs.gitbook.io/ngxs/advanced/sub-states#caveats