NgRx Select报错：Cannot read properties of undefined (reading 'machines') 求助

错误原因 #

出现ERROR TypeError: Cannot read properties of undefined (reading 'machines')的核心原因有两个：

1. 根状态未正确注册Reducer：AppState中定义了machineState，但如果未在Store配置中将machineReducer绑定到machineState键，会导致selectMachines返回undefined，进而访问state.machines时报错。
2. Reducer违反不可变原则：updateMachine处理函数中直接修改原状态的数组元素，NgRx依赖不可变更新检测状态变化，这种直接修改的方式会导致状态更新不被触发，async管道无法获取新数据，前端无法渲染。

解决方案 #

1. 正确注册Reducer到根状态 #

在根模块（如AppModule）中，确保StoreModule.forRoot配置里将machineReducer映射到machineState键：

import { StoreModule } from '@ngrx/store';
import { machineReducer } from './path/to/machine.reducer';

@NgModule({
  imports: [
    // ...其他模块
    StoreModule.forRoot({
      machineState: machineReducer // 绑定reducer到AppState的machineState属性
    })
  ]
})
export class AppModule {}

2. 修改Reducer为不可变更新 #

将updateMachine中的直接修改替换为不可变操作，创建新数组和状态对象：

export const machineReducer = createReducer(
  initialState,
  on(updateMachine, (state, { machine }) => {
    // 创建新数组替换目标元素
    const updatedMachines = state.machines.map(d => 
      d.id === machine.id ? machine : d
    );
    // 返回新状态对象
    return { ...state, machines: updatedMachines };
  }),
  on(getMachines, (state) => state)
);

3. 优化选择器（可选） #

添加空值保护，保证选择器始终返回有效数据：

export const selectMachines = (state: AppState) => state.machineState ?? initialState;
export const selectAllMachines = createSelector(
  selectMachines,
  (state) => state.machines
);

为什么加?消除错误但无法渲染？ #

添加?（可选链运算符）后，state?.machines会在state为undefined时返回undefined，此时allDevices$流的值为undefined，Angular的async管道处理undefined时不会渲染任何内容。只有保证machineState始终有有效值（通过正确注册reducer或选择器默认值），同时状态更新遵循不可变原则，async管道才能正常渲染数据。

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