如何在组件中追踪ngrx/signals store的API调用状态？新增状态字段是否合理？

我现有如下Signal Store实现：

export const Store = signalStore(
  withState(initialState),
  withMethods((store, userService = inject(UserService)) => ({
    getUser: rxMethod<string>(
      pipe(
        switchMap((id) => {
          return userService.get(id).pipe(
            tapResponse({
              next: (user) => patchState(store, { user }),
              error: console.error,
            })
          );
        })
      )
    ),
  }))
);

在组件中调用方式如下：

public getUser(id: string): void{
  this.store.getUser(id)
}

请问：

1. 如何在组件内追踪该API调用的完成状态（例如显示通知）？
2. 新增包含status字段的状态类型来追踪该API调用是否为最佳实践？
   状态类型定义如下：

type ArticlesState = {
  user: IUser;
  status: 'fulfilled' | 'loading' | 'error'
};

处理逻辑修改为：

getUser: rxMethod<string>(
  pipe(
    tap(() => patchState(store, { status: 'loading'}),
    switchMap((id) => {
      return userService.get(id).pipe(
        tapResponse({
          next: (user) => patchState(store, { user, status: 'fulfilled' }),
          error: console.error,
        })
      );
    })
  )
),

1. 在组件内追踪API调用完成状态 #

利用你定义的status状态字段是最直接的方案，因为Signal Store的状态是响应式的，组件可以直接读取并监听状态变化：

组件内实现步骤： #

• 确保Store状态包含status字段，且在API调用的加载、成功、错误阶段都更新该字段（完善你提供的修改逻辑）。
• 在组件中读取Store的status信号，根据状态值触发对应的UI操作（如加载提示、通知）。

示例组件代码：

import { Store } from './path-to-store';

@Component({
  // 组件元数据
})
export class UserComponent {
  private store = inject(Store);
  // 读取响应式状态信号
  userStatus = this.store.status;

  public getUser(id: string): void {
    this.store.getUser(id);
  }

  ngOnInit() {
    // 监听状态变化触发通知
    effect(() => {
      const currentStatus = this.userStatus();
      switch (currentStatus) {
        case 'fulfilled':
          this.notificationService.showSuccess('用户加载完成');
          break;
        case 'error':
          this.notificationService.showError('用户加载失败');
          break;
        // loading状态可绑定到加载动画组件
      }
    });
  }
}

如果不想依赖状态字段，也可以让rxMethod返回Observable，组件调用时订阅追踪状态，但这种方式不符合Signal Store集中管理状态的设计理念，不推荐使用。

2. 新增status字段是否为最佳实践 #

是的，这是Angular Signal Store中追踪异步操作状态的标准最佳实践，原因如下：

• 状态集中管理：异步操作的状态统一保存在Store中，组件无需维护额外状态，符合单一数据源原则。
• 响应式自动更新：Signal的响应式特性让组件自动感知状态变化，无需手动处理订阅与取消订阅（通过effect或模板绑定即可）。
• 逻辑复用：状态处理逻辑封装在Store中，多个组件可共享同一状态，避免重复代码。

优化建议 #

你提供的修改逻辑基本正确，可补充以下优化点：

• 在error回调中更新status为'error'，否则错误状态无法被记录：

tapResponse({
  next: (user) => patchState(store, { user, status: 'fulfilled' }),
  error: (err) => {
    console.error(err);
    patchState(store, { status: 'error' });
  },
})

• 若存在多个异步操作，建议为每个操作单独设置状态字段（如getUserStatus），避免状态冲突（比如同时加载用户和文章时，状态不会互相覆盖）。

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