React中useSelector返回undefined问题求助

你的代码里存在三个关键错误，共同导致了useSelector返回undefined，以下是具体问题和修正方案：

1. userSlice中reducer拼写错误 #

你在导出reducer时把reducer拼写成了renducer，这会导致导出的userReducer是undefined，store无法正确加载该reducer，自然无法获取状态。

修正后的userSlice代码：

import {createSlice , PayloadAction} from '@reduxjs/toolkit';

const initialState = {
    name:"john",
    email:"Doe",
};

const userSlice = createSlice({
    name:'user',
    initialState,
    reducers:{
        setUserName(state,action:PayloadAction<string>){
            state.name = action.payload
        },
        setUserEmail(state,action:PayloadAction<string>){
            state.email = action.payload
        }
    }
});
export const {setUserName,setUserEmail} = userSlice.actions;

// 修正拼写错误：renducer → reducer
const userReducer = userSlice.reducer
export default userReducer;

2. RootState类型定义与实际store结构不匹配 #

你手动调用combineReducers时用了userReducer作为key，但在configureStore里配置的reducer key是user，这导致RootState的类型和实际store的状态结构不一致，同时configureStore会自动合并reducers，不需要手动调用combineReducers。

修正后的store代码：

import { configureStore } from '@reduxjs/toolkit';
import userReducer from '../features/userSlice';

export const store = configureStore({
    reducer:{
        user:userReducer,
    },
});

// 直接从store的getState方法推导RootState类型，保证和实际结构一致
export type RootState = ReturnType<typeof store.getState>;

export type AppDispatch = typeof store.dispatch

3. 组件中useSelector的状态路径错误 #

实际store里的用户状态对应的key是user，但你在组件里用了store.userReducer去获取，这个路径不存在，所以返回undefined。

修正后的组件代码：

import { useSelector, useDispatch } from 'react-redux';
import { setUserName, setUserEmail } from '../../features/userSlice';
import { RootState, AppDispatch } from '../../store/store';

export default function Login(){
    // 修正状态路径：store.userReducer → store.user
    const user = useSelector((store: RootState) => store.user);
    console.log("user: ", user);   
}         

修正以上三个问题后，useSelector就能正确获取到你定义的initialState中的用户信息了。

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