Angular中NgRx Component Store订阅未检测到状态更新问题

算力阿峰

2026-8-19

问题原因

你遇到的问题是直接修改了原数组引用，Component Store依赖不可变数据更新触发订阅通知。在delete effect里，categories.splice(index, 1)直接修改了从状态中获取的原数组，之后把同一个数组引用传给setCategories。由于数组是引用类型，Component Store的浅比较机制会判定状态无变化，因此不会向组件订阅者推送新值。

解决方案

修改delete effect的处理逻辑，创建新数组引用而非直接修改原数组，以下是两种常用实现方式：

方式一：用filter生成新数组

readonly delete = this.effect((id$: Observable<string>) => {
  return id$.pipe(
    withLatestFrom(this.getCategories$),
    switchMap(([id, categories]) => {
      return this.iGenericHttpClient.delete(`/category/${id}`).pipe(
        tapResponse(
          () => {
            // 过滤掉目标项，生成全新数组
            const updatedCategories = categories.filter(x => x.id !== id);
            this.setCategories(updatedCategories);
          }
        )
      );
    })
  );
});

方式二：复制原数组后再修改

readonly delete = this.effect((id$: Observable<string>) => {
  return id$.pipe(
    withLatestFrom(this.getCategories$),
    switchMap(([id, categories]) => {
      return this.iGenericHttpClient.delete(`/category/${id}`).pipe(
        tapResponse(
          () => {
            // 复制原数组得到新引用
            const updatedCategories = [...categories];
            const index = updatedCategories.findIndex(x => x.id === id);
            updatedCategories.splice(index, 1);
            this.setCategories(updatedCategories);
          }
        )
      );
    })
  );
});

关键注意点

NgRx Component Store的状态更新严格遵循不可变数据原则：