Angular12 NGRX类型无法分配给ActionReducer<AdminState,Action>如何解决

• 错误使用TS类型作为值：你在根reducer配置中写的adminState: AdminState = { ... }里的AdminState是你定义的TS接口，属于类型层语法，仅编译阶段有效，不能作为运行时的赋值对象，直接触发'AdminState' only refers to a type, but is being used as a value here报错。
• ActionReducerMap类型不匹配：ActionReducerMap<ApplicationState>的每个属性必须对应一个ActionReducer类型的函数，你直接传入了包含多个子reducer的对象，不符合类型定义，所以触发类型不匹配报错。

方案1：使用combineReducers合并admin模块子reducer（适合全量在根注册的场景） #

修改根reducer的index.ts文件即可：

import { ActionReducerMap, combineReducers, MetaReducer } from '@ngrx/store';
// 替换为你自己的状态定义、子reducer导入路径
import { AdminState, ApplicationState } from './state.define';
import { AdminProductCategoryReducer } from './admin-category.reducer';
import { AdminProductVendorReducer } from './admin-vendor.reducer';
import { AdminProductSubCategoryReducer } from './admin-subcategory.reducer';
import { ProductsReducer } from './products.reducer';
import { ProductReducer } from './product.reducer';

// 先把admin模块的子reducer合并为单个符合类型要求的reducer函数
const adminReducers = combineReducers<AdminState>({
  adminProductCategory: AdminProductCategoryReducer,
  adminProductVendor: AdminProductVendorReducer,
  adminProductSubCategory: AdminProductSubCategoryReducer,
  products: ProductsReducer,
  product: ProductReducer,
});

// 根reducer配置
export const reducers: ActionReducerMap<ApplicationState> = {
  adminState: adminReducers, // 直接传入合并后的reducer函数
};

export const metaReducers: MetaReducer<ApplicationState>[] = [];

方案2：使用NGRX Feature模块注册（更推荐的分层写法） #

如果admin是独立业务模块，更推荐用feature注册的方式拆分，不用把所有reducer都塞到根配置里：

1. 删掉根reducer里的adminState相关配置
2. 在admin业务模块中注册feature状态：

// admin.module.ts 的 imports 配置
imports: [
  // 第一个参数为feature的key，对应ApplicationState里的adminState字段，第二个为合并后的admin子reducer
  StoreModule.forFeature('adminState', adminReducers),
  // 如果有admin相关的effects也在这里注册
  EffectsModule.forFeature([AdminEffects])
]

该方案的优势是根状态更简洁，懒加载模块的状态不会在应用启动时就加载，性能更优。

你的子reducer返回值定义为any不符合类型规范，可以修改为返回对应的状态类型，避免后续类型推断异常：

export function AdminProductCategoryReducer(state: ProductCategoryState | undefined, action: Action): ProductCategoryState {
  return reducer(state, action);
}

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