NGRX：如何更新Store不触发自定义选择器并保留组件选中状态？

一、持久化列表项选中状态 #

核心思路是用实体唯一ID存储选中状态，而非对象引用，避免WebSocket更新替换实体集合时丢失选中状态：

1. 组件Store仅维护选中项的ID集合，不存储完整实体对象：

// 组件Store状态结构
interface ComponentState {
  selectedIds: Set<string | number>; // 存储选中项的唯一标识ID
  filterConditions: FilterParams;
  sortConditions: SortParams;
}

2. 渲染列表时，通过ID匹配恢复选中状态：

<!-- 组件模板 -->
<div *ngFor="let item of filteredSortedItems$ | async">
  <input 
    type="checkbox" 
    [checked]="selectedIds.has(item.id)"
    (change)="toggleItemSelection(item.id, $event.target.checked)"
  >
  {{ item.name }}
</div>

3. 实体集合更新后，无需修改选中状态集合，仅通过ID匹配即可保持选中状态：

// 组件中处理选中状态变更
toggleItemSelection(itemId: string | number, isChecked: boolean) {
  if (isChecked) {
    this.store.dispatch(addSelectedId({ itemId }));
  } else {
    this.store.dispatch(removeSelectedId({ itemId }));
  }
}

二、避免筛选排序的不必要计算 #

通过解耦选中状态与筛选排序选择器的依赖关系，确保仅当实体列表、筛选条件或排序条件变化时，才触发筛选排序计算：

1. 拆分选择器逻辑：筛选排序选择器仅依赖全局Store的实体列表、组件Store的筛选/排序条件，完全排除选中状态依赖：

// 自定义筛选排序选择器
export const selectFilteredSortedItems = createSelector(
  selectGlobalEntityList, // 全局Store的原始实体列表
  selectComponentFilterConditions, // 组件Store的筛选条件
  selectComponentSortConditions, // 组件Store的排序条件
  (entities, filters, sorts) => {
    // 仅在此处执行筛选排序逻辑
    let processedItems = [...entities];
    // 应用筛选规则
    processedItems = processedItems.filter(item => matchesFilterRules(item, filters));
    // 应用排序规则
    processedItems = processedItems.sort((a, b) => compareBySortRules(a, b, sorts));
    return processedItems;
  }
);

2. 组件中分别订阅筛选排序后的列表和选中状态，渲染时再结合两者：

// 组件中独立订阅数据
filteredSortedItems$ = this.store.select(selectFilteredSortedItems);
selectedIds$ = this.store.select(selectComponentSelectedIds);

// 可选：合并数据用于视图渲染，仅在列表或选中状态变化时更新
displayItems$ = combineLatest([this.filteredSortedItems$, this.selectedIds$]).pipe(
  map(([items, ids]) => items.map(item => ({
    ...item,
    isSelected: ids.has(item.id)
  })))
);

3. 由于选中状态不在筛选排序选择器的依赖列表中，修改selectedIds时不会触发筛选排序逻辑的重新计算，仅会更新视图层面的选中状态。

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