Redux中使用useSelector获取的state为undefined该如何解决？

排查点1：修正代码语法错误 #

你贴出的代码本身存在3处语法错误，是直接导致返回undefined的核心原因：

• useSelector导入错误：react-redux中useSelector是命名导出，不能默认导入，修正为：

  import { useSelector } from "react-redux";
  

• useSelector回调没有返回值：箭头函数加了花括号后需要显式写return，要么去掉花括号使用隐式返回，两种修正写法：

  // 写法1：去掉花括号隐式返回
  let data = useSelector((state:StateType) => state.fooBar);
  // 写法2：加return显式返回
  let data = useSelector((state:StateType) => {
    return state.fooBar;
  });
  

• 组件类型定义错误：React.FC是函数组件本身的类型，不是返回值类型，修正写法：

  const FooBar: React.FC = () => {
    // 组件逻辑
  }
  

排查点2：检查Redux配置是否正确 #

如果修正语法后依然返回undefined，继续排查以下配置：

• 根组件外层必须用react-redux的Provider组件包裹，并且传入你创建的store实例，否则useSelector无法读取store数据。
• 检查combineReducers的注册逻辑：如果你的fooBar模块是挂载在某个命名空间下，比如注册时写的是combineReducers({ user: userReducer })，那取值时要写state.user.fooBar，不能直接取state.fooBar。
• 检查对应reducer的初始值是否正确设置：reducer的第一个参数默认值必须明确设置为包含fooBar字段的对象，不能留空。

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