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

Posted 2023-02-19

【中文标题】从状态中抽象选择器和动作处理程序

【英文标题】：Abstracting selectors and action handlers from state

【发布时间】：2019-02-01 20:33:30

【问题描述】：

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

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

export class EntityStateSelectors 
  @Selector([EntityState])
  thing(state: EntityStateModel) 
    return state.thing;
  

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

【问题讨论】：

也许你需要更多的状态和/或子状态？

感谢您的输入，但这不是我的意思 - 我已经有一个复杂的应用程序结构，有多个子状态。我还有很多选择器和操作处理程序，为了保持干净的应用程序结构，我想将它们拆分为单独的文件（如在 ngrx 中，这是我来自的模式）。这是可能的！检查我更新的问题。

在这种情况下，您如何处理在父->子关系之间创建循环引用？

@Ale 我使用相同的模式将选择器与动作处理程序分开，但很难使其与angular9.1 + ngxs3.6 一起使用。我在应用程序初始化时遇到运行时错误，例如使用选择器的Cannot read property 'NGXS_SELECTOR_META' of undefined。有什么提示吗？

@bertrandg 谢谢伙计，我们已经修复了它，不得不重构数据结构，所以依赖是一种方式。

【参考方案1】：

您可以为您的选择器创建一个单独的文件，强烈建议您使用。你可以创建一个像app.selectors.ts 这样的文件：

export class AppSelectors 

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

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

@Component(...)
export class AppComponent 
  @Select(AppSelectors.viewModel) vm$: Observable<ViewModel>;

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

【讨论】：

是的，如果你看到我不久前用你在这里的建议更新了我的问题:)