useSelector与useAppSelector的区别：Redux+RTK Query场景下的疑问

useAppSelector 不是Redux/RTK Query的内置API，它是开发者基于react-redux提供的原生useSelector封装的自定义Hook，核心目的是优化TypeScript项目下的类型体验，两者的核心工作逻辑完全一致，差异仅在于类型处理：

• 类型声明方式不同
  原生useSelector在TypeScript中使用时，需要手动指定Redux store的根状态类型RootState，否则无法获得正确的类型提示：

  import { useSelector } from 'react-redux';
  import type { RootState } from './store';
  
  const user = useSelector((state: RootState) => state.user);
  

  而useAppSelector是提前绑定了RootState类型的封装版本，通常在store配置文件中定义：

  // store.ts
  import { configureStore } from '@reduxjs/toolkit';
  import { TypedUseSelectorHook, useSelector } from 'react-redux';
  
  export const store = configureStore({
    reducer: { /* 你的reducer配置 */ }
  });
  
  // 导出类型化的useSelector
  export type RootState = ReturnType<typeof store.getState>;
  export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
  

  使用时无需重复声明类型，直接调用即可获得完整的类型提示：

  import { useAppSelector } from './store';
  
  const user = useAppSelector(state => state.user);
  

• 核心功能完全一致
  不管是useSelector还是useAppSelector，底层都是调用同一个react-redux的状态订阅逻辑：

  1. 从Redux store中提取指定的状态片段
  2. 订阅store的变化，当选中的状态发生改变时，触发组件重新渲染
  3. 内部会做浅比较优化，避免不必要的重渲染

• 来源不同

  • useSelector是react-redux包提供的原生Hook，所有Redux项目都可以直接导入使用
  • useAppSelector是项目内自定义的导出，仅在当前项目中可用，是开发者为了简化TS类型编写而封装的“语法糖”

简单总结：useAppSelector就是带默认类型的useSelector，本质是同一个Hook的封装版，没有功能上的差异，只是让TypeScript项目的开发更高效。

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