NGXS状态管理：深入理解Actions设计模式-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00489/article/details/148575721

NGXS状态管理：深入理解Actions设计模式

store 🚀 NGXS - State Management for Angular 项目地址: https://gitcode.com/gh_mirrors/sto/store

什么是Actions

在NGXS状态管理库中，Actions（动作）是状态变更的核心驱动力。它们可以被视为两种形式：

命令型：触发某些操作发生的指令（如用户点击按钮）
事件型：表示已经发生事情的结果（如API调用成功）

每个Action都必须包含一个type字段作为其唯一标识符，这个设计借鉴了Redux的Flux架构思想，但通过TypeScript的类机制实现了更好的类型安全。

内置Actions解析

NGXS内部会自动触发两种特殊Action：

@@INIT - 在Store初始化时触发，早于所有ngxsOnInit生命周期钩子
@@UPDATE_STATE - 当新的懒加载状态被添加到Store时触发

理解这些内部Action有助于我们掌握NGXS的初始化流程和动态加载机制。

Action基础用法

简单Action示例

假设我们要管理动物园动物是否被喂食的状态：

export class FeedAnimals {
  static readonly type = '[Zoo] Feed Animals';
}

这个Action只包含类型标识，没有附加数据。在状态类中监听这个Action后，可以翻转一个布尔值状态。

带元数据的Action

更常见的是需要携带数据的Action：

export class FeedZebra {
  static readonly type = '[Zoo] Feed Zebra';

  constructor(
    public name: string,  // 斑马名字
    public hayAmount: number  // 干草数量(公斤)
  ) {}
}

这种设计允许Action携带执行操作所需的上下文信息，体现了"富Action"的设计理念。

Action命名规范

良好的命名规范是维护大型应用的关键，NGXS推荐以下约定：

命令型Action命名

格式：[来源上下文] 动作实体

来源上下文：如[User API]、[Product Page]
动作：动词描述要对实体执行的操作
实体：被操作的对象，如User、Project

示例：

[User API] GetUser
[Dashboard] ArchiveProject

事件型Action命名

与命令型类似，但使用过去时态：

[User API] GetUserSuccess
[Project API] UpdateFailed

这种命名方式能清晰区分意图和结果，便于调试和日志追踪。

Action组织最佳实践

分组管理

将相关Action组织到命名空间中：

const ACTION_SCOPE = '[Todo]';

export namespace TodoActions {
  export class Add {
    static readonly type = `${ACTION_SCOPE} Add`;
    constructor(public payload: any) {}
  }

  export class Delete {
    static readonly type = `${ACTION_SCOPE} Delete`;
    constructor(public id: number) {}
  }
}

这种组织方式：