NGXS：将动作分离到单独的文件中答案

【问题标题】：NGXS: Separate actions into separate filesNGXS：将动作分离到单独的文件中
【发布时间】：2019-09-17 09:25:49
【问题描述】：

我在我的 Angular 8 应用程序中使用 NGXS。目前，所有动作处理程序（带有@Action 装饰器的函数）都在state.ts 中实现，这使得文件太长而无法读取。我设法使用@Selector([StateName]) 语法将选择器分隔在不同的文件中。但我无法使用@Actions 完成这项工作。理想情况下，我可以将我的 20 个左右的操作移动到 5 个不同的文件中。

如何使用 NGXS 做到这一点？

【问题讨论】：

不，这是不可能的。动作与@State 装饰器密切相关。它们都将静态元数据添加到类中，然后 NGXS 从类中读取此元数据。

标签： javascript angular redux action ngxs

【解决方案1】：

我发现缓解该问题的最佳方法是将状态分解为更小的块，使其更易于管理和阅读，状态结构可以分解为更小的部分还是全部相互关联？也许考虑使用子状态？ https://www.ngxs.io/advanced/sub-states

【讨论】：

【解决方案2】：

你能把逻辑移到函数中并从方法中调用这些函数吗？

// app.state
@State<AppStateModel>({
    name: 'app',
    defaults: defaultAppState,
})
export class AppState {

    @Action(AppInitialized)
    testAction(context: StateContext<AppStateModel>, action: AppInitialized) {
        return testActionFromOtherFile(context, action);
    }
}

// test.action.ts
export function testActionFromOtherFile(context: StateContext<AppStateModel>, action: AppInitialized) {
    // do stuff
}

【讨论】：