Angular 8 + NgRx 8.0.1中Selector报错：Cannot read property 'tourProvider' of undefined

你遇到的这个错误核心原因很明确：你的AdminState中的tourproviderState子状态没有被正确初始化和注册，导致Selector尝试访问它的tourProvider属性时，tourproviderState本身是undefined。下面是一步步的修复方案：

1. 关键修复：正确注册Admin模块的子Reducer #

这是导致当前报错的最主要原因。你已经定义了AdminState包含tourproviderState字段，但没有告诉NgRx把tourprovider的reducer关联到这个字段上。

在你的AdminModule的@NgModule装饰器中，需要这样配置StoreModule.forFeature：

import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { AdminStateKey } from './admin-store/admin.state';
import { reducer as tourproviderReducer } from './admin-store/reducers/tourprovider.reducer';

@NgModule({
  imports: [
    // ...其他模块导入
    StoreModule.forFeature(AdminStateKey, {
      tourproviderState: tourproviderReducer // 将tourprovider的reducer绑定到AdminState的tourproviderState字段
    })
  ]
})
export class AdminModule { }

没有这个配置的话，NgRx不会自动为AdminState创建tourproviderState子状态，Selector自然就拿不到这个值。

2. 修复Reducer中的字段笔误（次要但影响功能） #

在tourprovider.reducer.ts的loadTourproviderFail处理逻辑中，你写错了状态字段名：

// 错误代码
on(loadTourproviderFail, ((state, { errorMessage }) => {
  return { ...state, errorMes: errorMessage }
}))

// 修正为（对应TourproviderState中的error字段）
on(loadTourproviderFail, ((state, { errorMessage }) => {
  return { ...state, error: errorMessage }
}))

3. 优化初始状态的类型匹配（避免后续类型问题） #

你的tourProvider字段是RequestResult<Tourprovider>类型，但初始值设为{}不符合接口定义，建议改成合规的初始值：

const initialState: TourproviderState = {
  tourProvider: { code: 0, message: '', payload: {} as Tourprovider },
  error: null,
  isLoading: false
}

完成以上步骤后，重新运行项目，Redux DevTools中应该能看到admin状态下存在tourproviderState字段，Selector也能正常获取到tourProvider数据了。

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