如何在NGRX中一次性更新所有实体的指定属性

问题修复方案 #

1. 修复原reduce写法的错误

你原先代码的问题是构建实体属性时误将v作为键名写入对象，导致出现嵌套的v字段，调整后写法如下：

function updateAllIsExpanded(state, isExpanded): any {
  return Object.entries(state.entities).reduce(
    (p, [k, v]) => ({ ...p, [k]: { ...v, isExpanded } }),
    {}
  );
}

只需要把{ v, ...{isExpanded} }替换为{ ...v, isExpanded }即可，直接展开原实体对象的所有属性，再覆盖isExpanded字段，就不会产生多余的嵌套结构。

2. 更适配NgRx的实现方案

如果你不想使用updateMany构造批量更新数组，可以直接使用NgRx Entity适配器提供的map方法，该方法会遍历所有实体并返回修改后的新实体集合，写法更简洁，也符合NgRx的内置工具规范：

// 假设你已经定义了实体适配器entityAdapter
const newState = entityAdapter.map(
  (entity) => ({ ...entity, isExpanded }),
  state
);

该方法内部已经做了不可变更新的处理，不需要手动处理实体的key映射，性能也和手动写reduce基本一致。

内容的提问来源于stack exchange，提问作者JanuszFrontEnd'u