NgRx Store使用createFeatureSelector结合类时抛出运行时错误

嘿，升级到最新Angular、NgRx和Immutable.js后碰到这个构造函数错误，我之前也踩过类似的坑，大概率是Immutable的类型处理、NgRx选择器的类型定义或者版本兼容的问题，给你梳理几个关键排查方向：

1. 先检查Immutable.js的导入方式 #

如果你的代码里用的是默认导入（比如import Immutable from 'immutable'），然后调用Immutable.Map()，在新版本的Immutable.js（尤其是ES模块版本）里很容易出问题。正确的姿势是按需导入具体类：

import { Map, List } from 'immutable';

默认导入经常会导致类型解析异常，直接触发“不是构造函数”的报错。

2. 给NgRx选择器加上明确的类型注解 #

createFeatureSelector和createSelector对类型很敏感，尤其是结合Immutable的结构时，一定要明确指定类型，不然TypeScript的类型推断会出错。举个例子：

错误写法（容易踩坑）： #

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

// 没指定Immutable类型，state会被推断为any
const selectFeatureState = createFeatureSelector('myFeature');
const selectMyData = createSelector(
  selectFeatureState,
  state => state.get('myData') // 这里state实际是Immutable.Map，但类型不对就会报错
);

正确写法： #

import { createFeatureSelector, createSelector } from '@ngrx/store';
import { Map } from 'immutable';

// 先定义你的Feature State类型（基于Immutable.Map）
interface MyFeatureState extends Map<string, any> {
  myData: string;
  // 其他属性按需添加
}

// 明确把类型传给createFeatureSelector
const selectFeatureState = createFeatureSelector<MyFeatureState>('myFeature');

// 选择器里正确处理Immutable的get方法
const selectMyData = createSelector(
  selectFeatureState,
  (state: MyFeatureState) => state.get('myData')
);

3. 确认NgRx和Immutable.js的版本兼容 #

最新的NgRx（v16+）依赖TypeScript 5.x，而Immutable.js v4.x是完全支持TS的。如果版本不匹配，会出现各种类型解析错误。可以运行命令更新到兼容的稳定版：

# 更新NgRx全家桶到最新
npm install @ngrx/store@latest @ngrx/effects@latest @ngrx/entity@latest

# 更新Immutable.js到最新稳定版
npm install immutable@latest

4. 排查Reducer里的Immutable使用方式 #

如果Reducer里错误地用Mutable的方式修改Immutable对象（比如直接给state赋值，而不是用set/update），会导致后续选择器里的state类型混乱，触发错误。比如：

错误示例： #

function myFeatureReducer(state = Map({}), action) {
  switch (action.type) {
    case 'UPDATE_DATA':
      state.myData = action.payload; // 大错特错！Immutable对象不能直接赋值
      return state;
    default:
      return state;
  }
}

正确示例： #

function myFeatureReducer(state = Map({}), action) {
  switch (action.type) {
    case 'UPDATE_DATA':
      return state.set('myData', action.payload); // 必须用Immutable的方法返回新对象
    default:
      return state;
  }
}

5. 检查Store模块的配置 #

确保你的Feature模块里正确导入了StoreModule.forFeature()，比如：

import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { myFeatureReducer } from './my-feature.reducer';

@NgModule({
  imports: [
    StoreModule.forFeature('myFeature', myFeatureReducer)
    // 其他模块...
  ]
})
export class MyFeatureModule { }

如果这些步骤还没解决问题，可以补充一下你之前尝试过的操作，以及具体是哪个类（比如Immutable.Map还是自定义类）触发了“不是构造函数”的错误，这样能更精准定位问题~

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