如何使用@ngrx/entity按ID选择实体并避免无效订阅触发

这个问题我之前也碰到过，默认的selectEntities选择器会监听整个实体映射的变化——哪怕是新增了和你无关的实体，或者修改了未选中的项，都会触发组件的订阅，确实挺烦的。解决的核心是用参数化选择器，让选择器只聚焦你需要的ID对应的实体，只有这些实体发生变化时，才会触发订阅。

1. 按单个ID选择实体 #

你可以创建一个返回选择器的工厂函数，把目标ID作为参数传入，这样选择器只会关注该ID对应的实体：

第一步：在Feature选择器中定义工厂函数 #

import { createSelector } from '@ngrx/store';
// 导入你的Feature reducer中导出的实体选择器
import { selectEntities } from './your-feature.reducer';

// 接受实体ID作为参数，返回对应的选择器
export const selectEntityById = (entityId: string | number) => 
  createSelector(
    selectEntities,
    (entities) => entities[entityId] // 只提取指定ID的实体
  );

第二步：在组件中使用 #

import { selectEntityById } from './your-feature.selectors';

// 比如你要选ID为'user-123'的实体
this.store.select(selectEntityById('user-123')).subscribe(targetEntity => {
  // 只有ID为'user-123'的实体发生变化时，才会进入这里
  // 新增其他实体、修改其他实体都不会触发这个订阅
});

2. 按ID数组选择实体数组 #

和单个ID的思路一致，只是参数换成ID数组，最后映射出对应的实体列表：

第一步：定义多ID选择器工厂 #

export const selectEntitiesByIds = (entityIds: (string | number)[]) => 
  createSelector(
    selectEntities,
    (entities) => {
      // 映射出对应ID的实体，同时过滤掉不存在的项（可选）
      return entityIds.map(id => entities[id]).filter(Boolean);
    }
  );

第二步：组件中使用 #

const targetIds = ['user-123', 'user-456', 'user-789'];
this.store.select(selectEntitiesByIds(targetIds)).subscribe(targetEntities => {
  // 只有数组中任意一个ID对应的实体变化时，才会触发订阅
  // 新增不在数组里的实体、修改数组外的实体都不会触发
});

额外场景：ID来自Store中的另一个状态 #

如果你的目标ID不是硬编码，而是存在Store的另一个切片里（比如当前选中的实体ID），可以直接组合两个选择器：

import { selectSelectedEntityId } from './another-feature.selectors';

export const selectCurrentEntity = createSelector(
  selectEntities,
  selectSelectedEntityId,
  (entities, selectedId) => selectedId ? entities[selectedId] : null
);

这种情况下，只有selectedId变化，或者该ID对应的实体变化时，才会触发订阅。

为什么这能避免无关订阅？ #

ngrx的createSelector有记忆化缓存机制：只有当选择器依赖的输入（这里是selectEntities中指定ID的实体）发生变化时，才会重新计算结果并发出新值。哪怕整个实体映射有其他变化，但只要你关心的实体没动，选择器就会返回缓存的旧值，不会触发组件的订阅。

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