React-Redux使用useSelector获取store数据报undefined is not a function错误

这个错误的核心原因是你代码中调用的useSelector实际值为undefined，按以下优先级排查即可解决：

• 依赖版本问题
  useSelector是React-Redux v7.0.0才正式推出的Hook API，如果本地安装的react-redux版本低于7.0，Hook本身不存在，调用必然报错。先执行npm ls react-redux查看本地安装版本，版本过低时执行npm i react-redux@latest升级到稳定版即可。
  若版本符合要求，检查node_modules中是否存在多版本嵌套的react-redux依赖，存在的话删除lock文件和node_modules目录后重新执行npm install即可。
• 导入路径错误
  检查useSelector的导入来源，错误写法（比如从redux包导入、拼写错误）会直接拿到undefined值，正确导入写法如下：

  // 正确：必须从react-redux包导入
  import { useSelector } from 'react-redux'
  

• 根组件未正确配置Provider
  React-Redux的Hook必须在Provider包裹的组件树内调用，未包裹Provider、或者Provider未传入正确创建的store，也会触发该错误。根组件正确配置示例：

  import { createRoot } from 'react-dom/client'
  import { Provider } from 'react-redux'
  import store from './store'
  import App from './App'
  
  const root = createRoot(document.getElementById('root'))
  root.render(
    <Provider store={store}>
      <App />
    </Provider>
  )
  

• React版本兼容问题
  Hook API要求React版本>=16.8.3，若本地React版本过低、或者项目中存在多份React副本（常见于本地npm link调试场景），会导致Hook调用异常。执行npm ls react确认项目内仅存在一份符合版本要求的React实例，多副本问题可通过构建工具配置React别名指向项目本地react包解决。
• 自定义封装错误
  如果你对原生useSelector做了二次封装，检查封装逻辑是否正确导出了方法、是否存在拼写笔误（比如把useSelector错写为useSelecter），导入未正确导出的方法会拿到undefined值，调用就会触发该报错。

快速定位技巧：在调用useSelector的组件顶部加一行console.log(useSelector)，如果打印结果为undefined，优先排查上述前两项问题，可覆盖90%以上的同类报错场景。

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