使用RTK createListenerMiddleware调用getState()时出现TypeScript错误

以下是常见问题及对应解决方案：

1. 类型推断缺失导致TS报错 #

RTK的listenerApi.getState()默认不会自动推断你的RootState类型，需要手动指定：

• 先确保已从store导出RootState类型：

// store.ts
export type RootState = ReturnType<typeof store.getState>;

• 在监听器中给getState()添加类型断言：

const state = listenerApi.getState() as RootState;
const array: number[] = [...state[NameSpace.Array].array];

2. NameSpace键名与store注册的reducer不匹配 #

检查NameSpace.Array的取值是否和store中reducer的键完全一致：

• 比如枚举定义：

enum NameSpace {
  Array = 'arraySlice', // 必须和store里reducer的键名一致
}

• store中的注册代码：

export const store = configureStore({
  reducer: {
    [NameSpace.Array]: arrayReducer, // 键名要和NameSpace.Array的取值完全匹配
  },
});

3. 切片未初始化或未注册到store #

• 确认切片reducer已添加到store的reducer配置中（如上一步）
• 检查切片的初始状态是否包含array属性：

// arraySlice.ts
const initialState = {
  array: [] as number[], // 明确初始值，避免undefined
};

4. 运行时可能出现的undefined错误 #

如果切片可能未初始化，添加可选链或存在性检查避免崩溃：

const arraySlice = listenerApi.getState()[NameSpace.Array];
const array: number[] = arraySlice ? [...arraySlice.array] : [];
// 或用可选链
const array: number[] = [...(listenerApi.getState()[NameSpace.Array]?.array || [])];

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