使用Redux Toolkit时useSelector返回undefined问题求助

你遇到的useSelector返回undefined问题，核心原因是Redux状态树的键名和你访问的路径不匹配，具体分析和修复如下：

问题根源 #

在store配置中，你将SchoolDataReducer挂载到了School这个键下：

const store = configureStore({
    reducer: {
        School: SchoolDataReducer // 状态树的实际键名是School
    }
});

但在组件中你尝试访问State.datasets——datasets只是slice的name属性（仅用于生成action类型前缀），并不是状态树中的实际键名，所以自然返回undefined。

两种修复方案 #

方案一：修改useSelector的访问路径 #

直接对应store中定义的键名School：

const maindATA = useSelector(State => State.School)
console.log(maindATA); // 会返回初始空数组，调用thunk后更新为接口返回数据

方案二：修改store中的键名 #

如果你希望保持State.datasets的访问方式，把store里的键名改成datasets即可：

const store = configureStore({
    reducer: {
        datasets: SchoolDataReducer // 键名改为datasets
    }
});

这样原来的useSelector代码就能正常工作。

额外提醒 #

别忘了在组件中调用getDataTriger触发数据请求，否则状态会一直停留在初始空数组：

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { getDataTriger } from './path/to/SchoolData';

function YourComponent() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getDataTriger());
  }, [dispatch]);

  // ...组件其他逻辑
}

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