当我登录时，我分派login、setUserToken、setUserData reducer函数，并对它们进行console.log，我看到它们的状态已按预期更新。但当我尝试接收数据以供以后使用时，它是未定义/假的。

配置还原存储****store.js

import { configureStore } from "@reduxjs/toolkit";
import authReducer from "./auth";

const store = configureStore({
    reducer: {
        auth: authReducer,
    },
});

export default store;

创建切片****授权js

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

//create variable that we want redux to store for us
//this object configure the redux "state"
const initialAuthState = {
    loggedIn: false,
    userToken: "",
    userData: []
};

const authSlice = createSlice({
    name: "auth",
    initialState: initialAuthState,

    reducers: {
        login(state) {
            state.loggedIn = true;
            // console.log("login state: ", state.loggedIn)
        },
        setToken(state, action) {
            state.userToken = action.payload;
            // console.log("state.userToken: ", state.userToken)
        },
        setUserInfo(state, action) {
            state.userData = action.payload;
            // console.log("state.userData: ", state.userData)
        },

        logout(state) {
            state.loggedIn = initialAuthState.loggedIn;
            state.userToken = initialAuthState.userToken;
            state.userData = initialAuthState.userData;
        },

    },
});

export const authActions = authSlice.actions;

export default authSlice.reducer;

使用状态****主页.jsx

import {Container} from "../helpers/Container";
import {Title} from "../helpers/Title";
import {useSelector} from "react-redux";
import {useEffect, useState} from "react";

import store from "../../store/store";

function Homepage() {
    const [userData, setUserData] = useState([])
    let loggedin = useSelector((state) => state?.auth?.loggedIn);
    let user = useSelector((state) => state?.auth?.userData);
    let userTk = useSelector((state) => state?.auth?.userToken);

    useEffect(() => {
        console.log("user: ", user)  // undefined
        console.log("userTk: ", userTk) // undefined
        console.log("loggedin: ", loggedin) // false
        setUserData(user)
    }, [])
    return (
        <Container>
            <div>-{user}-{userTk}-{loggedin}</div>
            <Title titleText={"Welcome"} user={userData?.userName}/>
        </Container>
    );
}

export default Homepage;

我尝试在hmepage中显示用户名，以便在用户登录后向其致意。