Redux Toolkit使用createEntityAdapter时store.getState()为undefined如何解决

错误根因 #

你遇到的报错是两个问题共同导致的：

• 循环依赖导致store未初始化：driverReducer.ts 和 store.ts 存在循环导入，JS执行模块时driverReducer.ts先运行到导入store的位置，此时store.ts还没执行完configureStore的逻辑，store变量还是未初始化的undefined，调用undefined.getState()自然会报错
• 选择器用法错误：Entity Adapter生成的selectAll是接收state作为参数的函数，不需要在导出时就直接调用计算结果，应该导出选择器函数本身，在需要取值的时候再传入state

修复步骤 #

1. 修正driverReducer.ts的选择器导出 #

删除对store的导入，仅导出选择器函数本身：

const driversAdapter = createEntityAdapter<Driver>({
  sortComparer: (a, b) => a.name.localeCompare(b.name),
});

export const DriverSlice = createSlice({
  name: "drivers",
  initialState: driversAdapter.getInitialState(),
  reducers: {
    setDrivers: driversAdapter.setAll,
    driverAdded: driversAdapter.addOne,
    driverUpdated: driversAdapter.updateOne,
    driverRemoved: driversAdapter.removeOne,
  },
});

const driversSelectors = driversAdapter.getSelectors<RootState>(state => state.drivers);
// 导出选择器函数，不要提前调用store.getState()
export const selectAllDrivers = driversSelectors.selectAll;

export default DriverSlice.reducer;

2. 修正store.ts的拼写错误 #

你代码里reducer的字段值存在拼写错误，要和导入的reducer名称对应：

import driverReducer from './driverReducer' // 路径根据你项目实际结构调整

export const store = configureStore({
  reducer: {
    drivers: driverReducer, // 修正拼写错误，原代码写的是错误的driverReduces
  },
});

选择器使用方式 #

组件内使用（推荐） #

配合useSelector钩子直接使用即可：

import { useSelector } from 'react-redux';
import { selectAllDrivers } from './driverReducer';

function DriverList() {
  // useSelector会自动传入当前state给选择器
  const allDrivers = useSelector(selectAllDrivers);
  // 后续业务逻辑
}

非组件场景使用 #

如果需要在组件外获取driver列表，再单独导入store调用即可：

import { store } from './store';
import { selectAllDrivers } from './driverReducer';

const allDrivers = selectAllDrivers(store.getState());

内容的提问来源于stack exchange，提问作者F-Fardin