NgRx Action派发位置选择：组件、服务还是独立类？直连Store是否妥当？

Great question! Let's break down the tradeoffs and best practices here.

直接在组件内调用store.dispatch()的潜在问题 #

虽然在小项目或简单场景下这么做不会立刻出问题，但随着应用规模增长，会暴露不少弊端：

• 组件与Store过度耦合：组件需要知晓具体的Action类型和结构，一旦Action定义变更，所有用到它的组件都得修改，维护成本飙升。
• 逻辑重复难以复用：如果多个组件需要触发同一个业务动作（比如用户登录、数据刷新），每个组件都要重复写store.dispatch(...)的代码，冗余且易出错。
• 测试复杂度提升：组件依赖完整的Store实例，单元测试时需要Mock整个Store的状态和行为，不如Mock一个专用服务来得简单。
• 组件职责模糊：无状态组件本该专注于UI渲染和用户交互，混入Action派发逻辑后，会让组件变得臃肿，违背单一职责原则。

为什么推荐将Action派发逻辑迁移至Angular Service？ #

把派发逻辑封装到Service里是Angular + NgRx场景下的主流实践，核心优势在于：

• 解耦组件与Store：组件只需要调用Service的业务方法（比如userService.login(credentials)），完全不用关心背后是如何派发Action、更新Store的，组件更纯粹。
• 集中管理业务逻辑：所有和某个领域相关的Action派发（比如用户认证、商品管理）都集中在对应的Service里，便于统一修改和维护。
• 复用性更强：多个组件可以共享同一个Service的方法，避免重复代码。
• 测试更简单：单元测试组件时，只需要Mock对应的Service，而不用处理复杂的Store依赖；测试Service时，也可以单独验证Action派发的逻辑是否正确。

举个简单的示例：

// auth.service.ts
@Injectable({ providedIn: 'root' })
export class AuthService {
  constructor(private store: Store) {}

  login(credentials: { username: string; password: string }) {
    this.store.dispatch(loginAction({ credentials }));
    // 还可以在这里添加其他逻辑，比如调用API前的参数校验等
  }
}

// login.component.ts
export class LoginComponent {
  constructor(private authService: AuthService) {}

  onSubmit(credentials: { username: string; password: string }) {
    this.authService.login(credentials);
  }
}

关于独立Action类的思路：另一种封装方式 #

把Action定义和派发函数整合到可注入的独立类中，是更细粒度的封装方案，适合对代码内聚性要求较高的场景：

• Action逻辑完全内聚：每个Action的类型、结构、派发逻辑都封装在同一个类里，不用在组件里导入Action类型，也不用直接接触Store。
• 组件依赖更清晰：组件注入的是具体的Action类（比如LoginAction），调用它的dispatch方法即可，代码可读性更强。

示例代码如下：

// login.action.ts
@Injectable({ providedIn: 'root' })
export class LoginAction {
  readonly type = '[Auth] Login';

  constructor(private store: Store) {}

  dispatch(credentials: { username: string; password: string }) {
    this.store.dispatch({
      type: this.type,
      payload: credentials
    });
  }
}

// login.component.ts
export class LoginComponent {
  constructor(private loginAction: LoginAction) {}

  onSubmit(credentials: { username: string; password: string }) {
    this.loginAction.dispatch(credentials);
  }
}

总结 #

• 小型项目或简单场景：直接在组件内调用store.dispatch()可以快速实现功能，成本较低。
• 中大型项目：优先选择Service封装或独立Action类的方式，保持组件的无状态和简洁性，提升代码的可维护性和可测试性。

内容的提问来源于stack exchange，提问作者Ben Stills