从状态中抽象出选择器和动作处理程序

Ale*_*Ale 7 angular ngxs

我想知道是否可以将 @Selectors 和/或 @Action 处理程序从 @State 类抽象到一个单独的文件?随着状态变得越来越大并且选择器越来越复杂,我想将它们移动到一个单独的文件中以保持状态类更清晰。在 NGXS 中有没有办法做到这一点?

编辑:为了将来参考,我在 NGXS slack 频道上得到了一个答案,这确实是可能的。我们可以创建一个单独的选择器类来存储我们所有的选择器,将感兴趣的状态作为参数传递给它们。

export class EntityStateSelectors {
  @Selector([EntityState])
  thing(state: EntityStateModel) {
    return state.thing;
  }
}
Run Code Online (Sandbox Code Playgroud)

到目前为止,我仍然没有想出如何为动作处理程序做同样的事情,但是将选择器提取到一个单独的文件中已经清理了很多状态类!

小智 5

您可以为选择器创建一个单独的文件,强烈建议您这样做。您可以使用以下内容创建一个文件app.selectors.ts

export class AppSelectors {

  @Selector([AppState])
  static viewModel(state: AppStateModel) {
    // your selector logic here
  }

}
Run Code Online (Sandbox Code Playgroud)

然后你可以像这样在你的组件中正常使用:

@Component({...})
export class AppComponent {
  @Select(AppSelectors.viewModel) vm$: Observable<ViewModel>;
}
Run Code Online (Sandbox Code Playgroud)

这大大减少了app.state.ts文件的大小,因为它只留下动作处理程序。此外,这使您的代码更易于测试,因为您的选择器只是纯函数