Angular多组件订阅状态时的多错误处理方案问询

针对你遇到的多组件独立请求数据时的错误处理问题，这里提供几个实用且扩展性强的方案：

方案一：主Store内按数据模块拆分状态 #

直接在现有Store中为每个数据模块（项目列表、当前项目、最近项目）单独维护data、isLoading、error状态，避免全局单一状态的冲突：

interface StoreState {
  items: {
    data: Item[];
    isLoading: boolean;
    error: null | string;
  };
  currentItem: {
    data: Item;
    isLoading: boolean;
    error: null | string;
  };
  recentItem: {
    data: Item;
    isLoading: boolean;
    error: null | string;
  };
  // 可选：全局错误，处理跨模块的通用错误
  globalError: null | string;
}

• 每个组件仅订阅对应模块的状态：组件1监听items.error，组件2监听recentItem.error，完全隔离各自的错误状态。
• 扩展性强：新增数据模块时，只需在Store中添加对应的子状态结构即可。

方案二：使用NGRX Feature Store（特性模块Store） #

将每个数据模块拆分为独立的Feature Store，这是NGRX推荐的模块化状态管理方式：

1. 为每个模块创建独立的feature，比如itemsFeature、currentItemFeature、recentItemFeature
2. 每个Feature的状态结构如下：

// items.feature.ts
interface ItemsState {
  data: Item[];
  isLoading: boolean;
  error: null | string;
}

export const itemsFeature = createFeature({
  name: 'items',
  reducer: createReducer(
    initialState,
    on(loadItems, state => ({ ...state, isLoading: true, error: null })),
    on(loadItemsSuccess, (state, { data }) => ({ ...state, data, isLoading: false })),
    on(loadItemsFailure, (state, { error }) => ({ ...state, error, isLoading: false }))
  )
});

• 每个组件通过selectItemsError、selectRecentItemError等选择器，仅订阅自己模块的错误状态。
• 状态完全隔离，代码模块化程度高，适合中大型Angular项目，后续新增模块只需新增对应的Feature即可。

方案三：修改全局error为映射对象（最小改动方案） #

如果不想大幅调整现有Store结构，可以将全局error和isLoading改为键值对，对应每个请求的状态：

interface StoreState {
  isLoading: {
    items: boolean;
    currentItem: boolean;
    recentItem: boolean;
  };
  error: {
    items: null | string;
    currentItem: null | string;
    recentItem: null | string;
  };
  items: Item[];
  item: Item;
  recentItem: Item;
}

• 改动量最小，仅调整error和isLoading的结构。
• 组件订阅时直接取对应键的错误值，比如组件1判断error.items是否存在来显示自身错误。

通用实践建议 #

• 为每个请求定义完整的action生命周期：LoadXXX（触发加载）、LoadXXXSuccess（加载成功）、LoadXXXFailure（加载失败），在reducer中精准更新对应模块的isLoading和error状态。
• 组件内仅在自身区域展示错误提示，比如项目列表加载失败时，只在列表容器内显示错误文案，不干扰其他组件的正常展示。

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