Angular项目NGRX store未实例化 Redux DevTools显示undefined

NGRX Store状态在Redux DevTools中始终显示undefined，由3处配置错误/遗漏直接导致：

• StoreModule.forRoot()第一个参数传入空对象{}，你预先编写的appReducers没有注册到根Store，Store初始化时没有挂载任何状态片段
• 自定义的storeMetaReducers未在根配置中声明，不会实际执行
• 未引入@ngrx/store-devtools对应模块，Redux DevTools无法正常捕获Store初始化状态

1. 修改store.index.ts配置，替换空reducer对象为实际的appReducers，注册metaReducer，同时添加DevTools模块支持，修正后代码如下：

import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { appReducers } from './app.reducers';
import { storeMetaReducers } from './store.reducers';
// 替换为你项目实际的环境变量文件路径
import { environment } from '../environments/environment';

export const StoreRootModuleIndex = [
  StoreModule.forRoot(
    appReducers,
    {
      metaReducers: [storeMetaReducers],
      runtimeChecks: {
        strictStateImmutability: false,
        strictActionImmutability: false,
        strictStateSerializability: false,
        strictActionSerializability: false
      }
    }
  ),
  // 生产环境自动禁用DevTools
  !environment.production ? StoreDevtoolsModule.instrument({ maxAge: 25 }) : []
];

2. 检查所有子reducer的初始值设置：PointReducers下的closingTab、configTab、postTab三个reducer，必须给入参state设置默认初始值，否则首次加载时对应状态片段会返回undefined。标准写法参考：

// 单个子reducer示例
const initialClosingTabState: ClosingTabState = {
  // 你的初始状态字段
};

export function closingTabReducer(
  state: ClosingTabState = initialClosingTabState, 
  action: Action
) {
  switch (action.type) {
    // 对应action处理逻辑
    default:
      return state;
  }
}

3. 确认StoreRootModuleIndex已经被加入根模块AppModule的imports数组中，否则所有Store配置都不会生效。

配置修改完成后重启开发服务，打开Redux DevTools即可看到完整初始化状态，point节点下会正常展示closingTab、configTab、postTab三个子状态，不再显示undefined。

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