TypeScript中Redux多slice场景下useSelector类型定义问题

• 首先从你已创建的store实例推导全局根状态类型，不需要手动拼接各slice类型，TS会基于configureStore的配置自动推断结构：

// 在store配置的文件中导出RootState类型
export type RootState = ReturnType<typeof store.getState>;

• 你代码里useSelector第一个泛型位（第一个?????）传入上面定义的RootState即可，state取数的位置写.user，完整写法如下：

// 先从store所在文件导入RootState类型
import type { RootState } from '@/store'; // 替换成你实际的store文件路径

const userState = useSelector<RootState, User>((state) => state.user);

更推荐的最佳实践 #

每次调用useSelector都手动传泛型比较繁琐，可以提前在store文件中封装好预定义类型的useSelector钩子，全局复用：

import { useSelector as rawUseSelector, TypedUseSelectorHook } from 'react-redux';
// 封装带类型的selector钩子
export const useAppSelector: TypedUseSelectorHook<RootState> = rawUseSelector;

后续组件中使用useAppSelector时不需要传任何泛型参数，TS会自动识别state的结构、推导返回值类型：

const userState = useAppSelector(state => state.user); // 自动做类型校验，不需要手动写类型参数

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