Question

我正在使用NGXS中的Emitters插件来学习Angular，但在理解如何以可管理的方式声明状态文件时遇到了一些麻烦。

我已经成功声明了一个像下面这样的简单.state文件：


export type PageStatusCases = 'LOADING' | 'IDLE' | 'ERROR' | 'INITIALIZING';

export interface AppStateModel {
  pageStatus: PageStatusCases;
}

@State<AppStateModel>({
  name:     'AppState',
  defaults: {
    pageStatus: 'INITIALIZING'
  }
})
export class AppState {

  @Selector()
  static pageStatus(state: AppStateModel): PageStatusCases {
    return state.pageStatus;
  }

  @Receiver({type: '[Global] Page status'})
  static setPageStatus({patchState}: StateContext<AppStateModel>, {payload}: EmitterAction<PageStatusCases>): void {
    patchState({pageStatus: payload});
  }

}

现在我正在尝试一个更复杂的示例，将我的Service转换为State

在我的服务中，我BehaviorSubject经常跟踪我的UI状态。

  title: BehaviorSubject<string> = new BehaviorSubject('');

  backClick$: EventEmitter<void> = new EventEmitter<void>();
  primaryClick$: EventEmitter<void> = new EventEmitter<void>();

  toolbarVisible$: BehaviorSubject<boolean> = new BehaviorSubject(true);
  primaryVisible$: BehaviorSubject<boolean> = new BehaviorSubject(false);
  primaryDisabled$: BehaviorSubject<boolean> = new BehaviorSubject(false);
  primaryAutoDisabled$: BehaviorSubject<boolean> = new BehaviorSubject(false);
  primaryIcon$: BehaviorSubject<ToolbarPrimaryIcon> = new BehaviorSubject(ToolbarPrimaryIcon.ADD);

我已经开始将BehaviorSubject转换为状态的一部分，但是我意识到我需要创建很多样板代码。

我需要为每个BehaviorSubject：

在州模型Interface中声明它
在State
声明其@Selector处于“清单”状态
声明该状态为@Receiver（Action）
在需要它的每个组件中声明它为@Select
在需要更新的每个组件中声明它为@Emitter

我目前的情况是要正确地仅对7个变量进行状态管理的100多行代码，所以我想我缺少了一些东西。我什至没有抱怨视觉噪音的增加。

Clearly something is wrong

我想知道我在想什么，在这样的情况下，什么是更好的宣告状态的方法。

我正在将NGXS与emitters插件一起使用，因为通过它我可以减少样板数量，但目前收效不高。

Answer 1

会有一些样板，但我认为您可能会看到的主要问题是创建了一堆@Selector，它们仅访问单个状态属性-订阅状态更改的组件不会不需要@Selector。

他们可以直接通过@Select绑定Observable或直接通过store.select()语句来订阅状态。图像还显示了一堆@Select状态的声明（也不需要）。

我自己还没有使用过NGXS Labs的Emitters东西，所以我无法对此用法发表评论。

以理智的方式在NGXS中声明状态

1 个答案: