如何在ngrx/store中规范化深度嵌套的数据结构？

这确实是NgRx处理嵌套状态时的典型痛点——深度嵌套的结构不仅让不可变更新变得繁琐，还会带来不必要的性能开销。咱们可以通过规范化状态结构来解决这个问题，核心思路是把嵌套的树形数据扁平化存储，用唯一ID来关联节点之间的层级关系，而不是直接嵌套对象。

一、设计规范化的状态结构 #

我们需要把所有节点存储在一个扁平化的字典（entities）中，同时用ID来维护层级关联：

// 定义单个节点的结构（新增唯一ID、父节点ID、子节点ID列表）
interface Node {
  id: string; // 全局唯一标识，用于定位节点
  aliases: string[];
  isRequired: boolean;
  isSensitive: boolean;
  name: string;
  timezoneId: string;
  parentId?: string; // 父节点ID，根节点无此属性
  childrenIds: string[]; // 子节点的ID列表，替代原有的children对象数组
}

// 规范化后的根状态
interface State {
  entities: { [id: string]: Node }; // 扁平化存储所有节点
  rootIds: string[]; // 根节点的ID列表
}

二、转换现有数据为规范化结构 #

给你的原始数据每个节点生成唯一ID（可以用uuid库或自定义规则生成），然后转换为上述结构：

const normalizedState: State = {
  entities: {
    'addr-001': {
      id: 'addr-001',
      aliases: ['alias1', 'alias2'],
      isRequired: false,
      isSensitive: false,
      name: 'Adress',
      timezoneId: 'UTC',
      parentId: undefined,
      childrenIds: []
    },
    'phone-001': {
      id: 'phone-001',
      aliases: ['alias3', 'alias4'],
      isRequired: true,
      isSensitive: false,
      name: 'Phone',
      timezoneId: 'UTC-5',
      parentId: undefined,
      childrenIds: ['sub-phone-001']
    },
    'sub-phone-001': {
      id: 'sub-phone-001',
      aliases: ['alias1', 'alias2'],
      isRequired: true,
      isSensitive: false,
      name: 'Sub-Phone',
      timezoneId: 'UTC-5',
      parentId: 'phone-001',
      childrenIds: ['sub-sub-phone-001']
    },
    'sub-sub-phone-001': {
      id: 'sub-sub-phone-001',
      aliases: ['alias-phone1', 'alias-phone2'],
      isRequired: false,
      isSensitive: true,
      name: 'Sub-Sub-Phone',
      timezoneId: 'UTC',
      parentId: 'sub-phone-001',
      childrenIds: []
    }
  },
  rootIds: ['addr-001', 'phone-001']
};

三、简化Reducer中的修改操作 #

现在修改某个节点（比如name: 'Phone'的节点）只需要更新entities中对应的条目，不需要复制整个嵌套树：

// 可以结合NgRx的createEntityAdapter简化操作
import { createEntityAdapter, EntityState } from '@ngrx/entity';

const nodeAdapter = createEntityAdapter<Node>();
const initialState: State = nodeAdapter.getInitialState({ rootIds: [] });

function reducer(state = initialState, action: NodeActions): State {
  switch (action.type) {
    case '[Node] Update Name':
      // 只更新目标节点的name属性，其他状态保持不变
      return nodeAdapter.updateOne(
        {
          id: action.payload.nodeId,
          changes: { name: action.payload.newName }
        },
        state
      );

    // 其他操作（新增、删除节点）也可以用adapter的方法快速实现
    default:
      return state;
  }
}

四、通过Selector还原树形结构 #

如果组件需要展示嵌套的树形数据，可以写一个Selector把扁平化的结构转换回嵌套形式：

import { createSelector } from '@ngrx/store';

// 先定义辅助函数构建树形结构
const buildTree = (nodeId: string, entities: { [id: string]: Node }) => {
  const node = entities[nodeId];
  return {
    ...node,
    children: node.childrenIds.map(childId => buildTree(childId, entities))
  };
};

// 创建Selector供组件使用
export const selectNestedNodes = createSelector(
  (state: AppState) => state.nodes.entities,
  (state: AppState) => state.nodes.rootIds,
  (entities, rootIds) => rootIds.map(id => buildTree(id, entities))
);

核心优势 #

1. 修改操作极简：只需要更新目标节点，无需处理多层嵌套的不可变复制；
2. 性能提升：Selector会缓存计算结果，只有当关联的节点变化时才会重新生成树形结构；
3. 可维护性强：层级关系通过ID关联，新增、删除节点的逻辑更清晰，避免嵌套结构带来的复杂度。

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