React中能否在函数组件外使用useSelector()获取Redux Store数据？

不能直接在React函数组件外面调用useSelector()，一调用就会报错——因为它是React Hook，必须严格遵守Hook的使用规则。

为啥会报错？ #

useSelector是Redux搭配React用的Hook，React对Hook的调用场景有硬性要求：

• 只能在React函数组件的顶层代码里调用
• 只能在自定义Hook的顶层代码里调用

要是跑到组件外部调用，就脱离了React的渲染上下文，Hook没法和组件的状态更新机制绑定，自然就触发违规报错了。

那想在组件外部拿Redux数据怎么办？ #

给你两个实用方案：

• 直接调用store的getState方法：如果你已经创建并导出了Redux的store实例，直接用store.getState()就能拿到当前的完整状态。举个例子：

  // 先导入你的store
  import store from './redux/store';
  
  // 在组件外部任意地方调用
  const currentStoreData = store.getState();
  const userInfo = currentStoreData.user;
  

• 封装自定义Hook：如果是想复用状态选择逻辑，还是老老实实把逻辑封装成自定义Hook，然后在组件内部调用，既合规又能复用：

  import { useSelector } from 'react-redux';
  
  // 自定义Hook
  export const useUserInfo = () => {
    return useSelector(state => state.user);
  };
  
  // 在组件里用
  function ProfileComponent() {
    const userInfo = useUserInfo();
    // 渲染逻辑...
  }
  

内容的提问来源于stack exchange，提问作者Danang Ipul Basrin