Angular 16独立应用NgRx createSelector状态自动包装问题排查

我在Angular 16独立应用中搭建了简易NgRx状态管理，功能运行正常，Redux DevTools显示store结构为{ app: { layout: 'full' } }。但在选择器中读取数据时，状态被自动包装，我期望使用createSelector(getAppState, (app: AppState) => app)，而非createSelector(getAppState, (app: any) => app.app)，请问问题出在哪里？

相关代码：

app.state.ts

import { Selector } from "@ngrx/store";

export type Layout = "full" | "sidebar" | "center";

export interface AppState {
  layout: Layout;
}

export const initialState: AppState = {
  layout: "full",
};

export const getAppState: Selector<AppState, AppState> = (state) => state;

app.selectors.ts（异常行为）

import { createSelector } from "@ngrx/store";
import { getAppState } from "@store/app/app.state";

// app被包装为{ app: app }，因此需要使用'any'并返回app.app 
const getLayoutState = createSelector(getAppState, (app: any) => app.app);

// layout被包装为{ layout: layout }，因此需要使用'any'并返回layout.layout
export const selectLayout = createSelector(
  getLayoutState,
  (layout: any) => layout.layout
);

app.reducers.ts

import { createReducer, on } from "@ngrx/store";
import { setLayout } from "@store/app/app.actions";
import { AppState, initialState } from "@store/app/app.state";

export const appReducers = createReducer(
  initialState,
  on(setLayout, (state: AppState, { layout }) => ({
    ...state,
    layout,
  }))
);

main.ts

[...]
providers: [
    provideRouter(routes),
    provideClientHydration(),
    provideHttpClient(),
    provideStore({ app: appReducers }),
  ],
[...]

核心问题是**getAppState的类型定义与实际根状态结构不匹配**：

• 在main.ts中，你通过provideStore({ app: appReducers })将appReducers注册为根状态下的app分片，因此整个根状态的结构是{ app: AppState }，而非直接是AppState。
• 但你在app.state.ts中定义getAppState: Selector<AppState, AppState>，错误地将根状态类型指定为AppState，导致选择器接收的实际是完整的根状态（包含app属性的对象），而非你期望的AppState实例。

方案1：手动修正选择器类型 #

修改app.state.ts，明确根状态结构并修正getAppState的类型：

import { Selector } from "@ngrx/store";

export type Layout = "full" | "sidebar" | "center";

export interface AppState {
  layout: Layout;
}

export const initialState: AppState = {
  layout: "full",
};

// 定义根状态类型，包含app分片
export interface RootState {
  app: AppState;
}

// 选择根状态中的app分片，返回AppState类型
export const getAppState: Selector<RootState, AppState> = (state) => state.app;

然后修改app.selectors.ts，即可正常使用类型化的选择器：

import { createSelector } from "@ngrx/store";
import { getAppState, AppState } from "@store/app/app.state";

// 此时app参数就是AppState类型，无需额外拆包
export const selectLayout = createSelector(
  getAppState,
  (app: AppState) => app.layout
);

方案2：使用NgRx createFeature（推荐） #

NgRx的createFeature可以自动生成分片选择器，避免手动维护根状态类型，更符合最佳实践：

1. 修改app.reducers.ts，用createFeature封装分片：

import { createReducer, on, createFeature } from "@ngrx/store";
import { setLayout } from "@store/app/app.actions";
import { AppState, initialState } from "@store/app/app.state";

export const appFeature = createFeature({
  name: 'app', // 分片名称，对应根状态中的属性名
  reducer: createReducer(
    initialState,
    on(setLayout, (state: AppState, { layout }) => ({
      ...state,
      layout,
    }))
  ),
});

// 自动生成的选择器：selectAppState（选择整个app分片）、selectLayout（直接选择layout属性）
export const { selectAppState, selectLayout } = appFeature;

2. 修改main.ts，使用provideFeature注册分片：

[...]
import { appFeature } from '@store/app/app.reducers';

providers: [
    provideRouter(routes),
    provideClientHydration(),
    provideHttpClient(),
    provideStore(), // 无需传入分片，改用provideFeature注册
    provideFeature(appFeature),
  ],
[...]

3. 此时无需手动定义getAppState，直接使用自动生成的selectLayout即可：

// 在组件中直接导入使用
import { selectLayout } from "@store/app/app.reducers";

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