如何在ngrx/store中正确合并展示组件的状态切片？

Hey there! 看来你在NgRx里处理员工和学位关联的状态合并时碰到了棘手问题，我来帮你拆解分析下～

首先先纠正下你实体定义里的小语法问题，应该用接口或者正确的类写法（数据模型更推荐用接口）：

export interface Employee { 
  id: number; 
  firstName: string; 
  lastName: string; 
  degreeId?: number; 
  degree?: Degree; // 建议设为可选，避免数据未加载时出现undefined
}

export interface Degree { 
  id: number; 
  description: string; 
}

接下来针对你提到的状态合并问题，结合NgRx的最佳实践，给你几个核心解决思路：

1. 优先采用「分离实体切片」设计，避免嵌套状态 #

NgRx里处理关联实体（比如员工和学位），最推荐的方式是把两个实体分开存储在独立的状态切片里，而不是把Degree直接嵌套在Employee中。这样能避免更新学位时需要遍历所有员工的低效操作，也能从根源减少状态合并冲突。

示例状态结构： #

// 根状态接口
export interface AppState {
  employees: EmployeeState;
  degrees: DegreeState;
}

// 员工状态（仅存degreeId，不存完整Degree对象）
export interface EmployeeState {
  entities: { [id: number]: Employee };
  ids: number[];
  loaded: boolean;
}

// 学位状态
export interface DegreeState {
  entities: { [id: number]: Degree };
  ids: number[];
  loaded: boolean;
}

用Selector动态关联数据 #

在组件中需要获取带学位信息的员工时，通过NgRx的selector组合两个切片的数据即可：

import { createSelector } from '@ngrx/store';
import { selectEmployeesEntities, selectDegreesEntities } from './your-selectors';

// 创建组合Selector，实时关联员工和对应的学位
export const selectEmployeesWithDegree = createSelector(
  selectEmployeesEntities,
  selectDegreesEntities,
  (employees, degrees) => {
    return Object.values(employees).map(employee => ({
      ...employee,
      degree: employee.degreeId ? degrees[employee.degreeId] : undefined
    }));
  }
);

2. 如果必须保留嵌套结构，确保不可变更新的正确性 #

如果你因为业务需求必须把Degree嵌套在Employee中，那问题大概率出在reducer里的状态更新没有遵循不可变原则，导致旧的degree数据没有被正确合并。

可以用immer库简化不可变更新（NgRx官方也推荐这种方式）：

import { produce } from 'immer';
import { EmployeeActions } from './employee.actions';

export function employeeReducer(state = initialEmployeeState, action: EmployeeActions) {
  return produce(state, draft => {
    switch (action.type) {
      case '[Employee] Load Employee Success':
        const incomingEmployee = action.payload;
        // 正确合并员工数据：保留原有状态的同时覆盖新数据，确保degree字段正确更新
        draft.entities[incomingEmployee.id] = {
          ...draft.entities[incomingEmployee.id] || {}, // 保留已有数据（如果存在）
          ...incomingEmployee,
          // 可选：如果后端返回的degree不完整，可优先用本地已加载的学位数据
          degree: incomingEmployee.degree || draft.entities[incomingEmployee.id]?.degree
        };
        break;
      // 其他action处理逻辑...
    }
  });
}

3. 检查数据加载顺序的影响 #

如果是先加载员工数据、后加载学位数据，会导致员工的degree字段暂时为空。这种情况下，你可以：

• 在学位加载完成后，触发一个action更新所有关联员工的degree字段
• 或者直接依赖上面提到的组合selector，让它自动在学位数据就绪后渲染完整信息，无需修改员工状态

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