Redux类组件转Hooks时useSelector返回undefined，如何正确转换mapStateToProps？

问题原因 #

你之前写法报错的核心问题是：useSelector 接收的回调函数第一个参数是完整的Redux根状态对象，不是直接的favourites业务切片状态。你在代码中将根状态直接命名为favourites，相当于从根状态上直接取favValues属性，自然会返回undefined。

正确转换写法 #

有两种常用的转换方式，可根据使用习惯选择：

方式1：拆分调用useSelector（推荐） #

每个字段单独调用useSelector，仅在对应字段变化时触发组件重渲染，性能最优：

import { useSelector } from 'react-redux'

// 函数组件内部逻辑
const queryFilter = useSelector(state => state.queryFilter)
const favValues = useSelector(state => state.favourites.favValues)
const defaultGroup = useSelector(state => state.favourites.defaultGroup)
const initialValues = useSelector(state => state.favourites.initialValues)
const favouritesList = useSelector(state => state.favourites.favouritesList)
const loadingFavValues = useSelector(state => state.favourites.loadingFavValues)
const applyingFavValues = useSelector(state => state.favourites.applyingFavValues)

方式2：一次性返回全量字段 #

和原有mapStateToProps写法逻辑一致，需额外传入shallowEqual避免不必要的重渲染：

import { useSelector, shallowEqual } from 'react-redux'

// 函数组件内部逻辑
const {
  queryFilter,
  favValues,
  defaultGroup,
  initialValues,
  favouritesList,
  loadingFavValues,
  applyingFavValues
} = useSelector(state => ({
  queryFilter: state.queryFilter,
  favValues: state.favourites.favValues,
  defaultGroup: state.favourites.defaultGroup,
  initialValues: state.favourites.initialValues,
  favouritesList: state.favourites.favouritesList,
  loadingFavValues: state.favourites.loadingFavValues,
  applyingFavValues: state.favourites.applyingFavValues,
}), shallowEqual)

注意：shallowEqual会对返回对象的第一层属性做浅比较，避免因每次返回新对象导致的不必要重渲染

异常排查建议 #

如果按上述写法仍返回undefined，可从两个方向排查：

• 确认根reducer中注册favourites切片的key值为favourites，和mapStateToProps中解构的key保持一致
• 确认favourites切片的初始状态中已定义favValues等相关字段，未定义的初始字段访问会返回undefined

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