Angular+NgRx项目跨状态解析用户名失败，求修复方案

你的代码存在两个核心问题：

1. Reducer无法跨切片访问状态：Reducer是纯函数，只能操作当前状态切片（项目状态），无法直接获取用户状态切片的数据。
2. 选择器使用方式错误：getUserNameByIdSelector(...)返回的是一个Selector实例，不是直接的用户名结果——Selector需要传入Store的完整状态才能执行，不能在Reducer里直接调用取值。

下面是两种符合NgRx最佳实践的修复方案：

方案一：使用组合选择器（推荐） #

不要在Reducer中处理跨状态的关联逻辑，而是通过组合选择器将项目状态与用户状态结合，在组件层面获取已解析用户名的项目数据。

步骤1：定义基础选择器 #

// 项目状态基础选择器
export const selectProjectsState = createFeatureSelector<ProjectsState>('projects');
export const selectAllProjects = createSelector(selectProjectsState, state => state.projects);

// 用户状态选择器（假设你已定义）
// export const selectPeople = createFeatureSelector<PeopleState>('people');

步骤2：创建组合选择器解析用户名 #

export const selectProjectsWithUserNames = createSelector(
  selectAllProjects,
  selectPeople,
  (projects, peopleState) => {
    // 将用户数据转为Map，提升查找效率
    const userNameMap = new Map(peopleState.users.map(user => [user.Id, user.Name]));
    
    return projects.map(project => ({
      ...project,
      Author: {
        ...project.Author,
        Value: userNameMap.get(project.Author.Key as number) || '未知用户'
      },
      Editor: {
        ...project.Editor,
        Value: userNameMap.get(project.Editor.Key as number) || '未知用户'
      }
    }));
  }
);

步骤3：简化Reducer逻辑 #

Reducer只负责保存原始项目数据，无需处理用户名解析：

case ActionTypes.LoadAllProjectsSuccess: {
  return {
    ...state,
    projects: action.payload
  };
}

组件中使用 #

在组件中通过selectProjectsWithUserNames选择器获取带用户名的项目数据：

projects$ = this.store.select(selectProjectsWithUserNames);

方案二：在Effect中预处理项目数据 #

如果需要在Redux store中直接保存已解析的项目数据，可以在Effect中先获取用户状态，预处理项目数据后再dispatch到Reducer。

@Injectable()
export class ProjectsEffects {
  loadProjects$ = createEffect(() =>
    this.actions$.pipe(
      ofType(ActionTypes.LoadAllProjects),
      withLatestFrom(this.store.select(selectPeople)), // 获取用户状态
      switchMap(([, peopleState]) => {
        return this.projectsService.getAll().pipe(
          map(rawProjects => {
            const userNameMap = new Map(peopleState.users.map(user => [user.Id, user.Name]));
            // 预处理项目数据
            const processedProjects = rawProjects.map(project => ({
              ...project,
              Author: {
                ...project.Author,
                Value: userNameMap.get(project.Author.Key as number) || '未知用户'
              },
              Editor: {
                ...project.Editor,
                Value: userNameMap.get(project.Editor.Key as number) || '未知用户'
              }
            }));
            return ActionTypes.LoadAllProjectsSuccess({ payload: processedProjects });
          })
        );
      })
    )
  );

  constructor(
    private actions$: Actions,
    private store: Store,
    private projectsService: ProjectsService
  ) {}
}

Reducer逻辑保持方案一中的简化版本即可。

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