无法在Redux中访问Auth状态，出现undefined错误求助

我无法理解为何会出现undefined错误，希望解决无法访问Redux中Auth状态的问题。控制台提示Auth State: undefined，在selectUser选择器中state.auth输出undefined，相关代码如下：

相关代码 #

src/queries/authSlice.jsx #

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
    isAuthenticated: false,
}

const authSlice = createSlice({
    name: 'auth',
    initialState,
    reducers: {
        loginSuccess: (state) => {
            state.isAuthenticated = true;
        },
        logoutSuccess: (state) => {
            state.isAuthenticated = false;
        }
    }
});

export const selectUser = (state) => console.log(state.auth)
export const { loginSuccess, logoutSuccess } = authSlice.actions;
export default authSlice.reducer;

src/queries/rootReducer.jsx #

import { combineReducers } from 'redux';
import authReducer from './authSlice';
import { queriesApi } from './queries';

const rootReducer = combineReducers({
    auth: authReducer,
    [queriesApi.reducerPath]: queriesApi.reducer
});

export default rootReducer;

src/queries/store.jsx #

import { configureStore } from '@reduxjs/toolkit';
import { queriesApi } from './queries';

const store = configureStore({
    reducer: {
        [queriesApi.reducerPath]: queriesApi.reducer
    },
    middleware: (getDefaultMiddleware) => {
        return getDefaultMiddleware().concat(queriesApi.middleware)
    }
});

export default store;

SignIn.jsx #

import * as React from 'react';
import { ThemeProvider } from '@mui/material/styles';
import { useDispatch, useSelector } from 'react-redux';
import { loginSuccess, logoutSuccess, selectUser } from '../queries/authSlice';

const defaultTheme = createTheme();

export default function SignIn() {
const data = new FormData(event.currentTarget);
    console.log({
      email: data.get('email'),
      password: data.get('password'),
    });
  };

  const dispatch = useDispatch();
  const authState = useSelector(selectUser);
  console.log('Auth State:', authState);

  const isAuthenticated = authState.isAuthenticated;

  const handleLogin = () => {
    dispatch(loginSuccess());
  };

  const handleLogout = () => {
    dispatch(logoutSuccess());
  };

  return (
    <ThemeProvider theme={defaultTheme}>
      <div>
      {isAuthenticated ? (
        <button onClick={handleLogout}>Logout</button>
      ) : (
        <button onClick={handleLogin}>Login</button>
      )}
    </div>
    </ThemeProvider>
  );
}

问题原因 #

1. Store未加载Auth reducer：你已经创建了合并了authReducer的rootReducer，但在store.jsx中并未使用这个合并后的reducer，仅配置了queriesApi的reducer，导致Redux store中不存在auth状态分支，state.auth自然为undefined。
2. 选择器写法错误：selectUser仅执行console.log，没有返回任何值，导致useSelector拿到的结果是undefined。
3. SignIn组件存在语法错误：缺少createTheme导入、FormData代码块位置错误，会导致组件无法正常运行。

修复步骤 #

1. 修正Store配置（store.jsx） #

导入并使用合并后的rootReducer，让Auth状态加入到Store中：

import { configureStore } from '@reduxjs/toolkit';
import { queriesApi } from './queries';
import rootReducer from './rootReducer';

const store = configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) => {
        return getDefaultMiddleware().concat(queriesApi.middleware)
    }
});

export default store;

2. 修正Auth选择器（authSlice.jsx） #

让selectUser返回auth状态（如需调试可保留打印）：

// 基础写法：返回auth状态
export const selectUser = (state) => state.auth;

// 带调试打印的写法：
// export const selectUser = (state) => {
//   console.log(state.auth);
//   return state.auth;
// };

3. 修复SignIn组件语法错误（SignIn.jsx） #

import * as React from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { useDispatch, useSelector } from 'react-redux';
import { loginSuccess, logoutSuccess, selectUser } from '../queries/authSlice';

const defaultTheme = createTheme();

export default function SignIn() {
  const dispatch = useDispatch();
  const authState = useSelector(selectUser);
  console.log('Auth State:', authState);

  const isAuthenticated = authState.isAuthenticated;

  const handleLogin = () => {
    dispatch(loginSuccess());
  };

  const handleLogout = () => {
    dispatch(logoutSuccess());
  };

  // 表单提交逻辑（如需使用表单）
  const handleSubmit = (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    console.log({
      email: data.get('email'),
      password: data.get('password'),
    });
  };

  return (
    <ThemeProvider theme={defaultTheme}>
      <div>
        {/* 如需表单可添加以下代码 */}
        {/* <form onSubmit={handleSubmit}>
          <input name="email" type="email" />
          <input name="password" type="password" />
          <button type="submit">提交</button>
        </form> */}
        {isAuthenticated ? (
          <button onClick={handleLogout}>Logout</button>
        ) : (
          <button onClick={handleLogin}>Login</button>
        )}
      </div>
    </ThemeProvider>
  );
}

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