Redux 工具包 useSelector 返回未定义答案

【问题标题】：Redux toolkit useSelector return undefinedRedux 工具包 useSelector 返回未定义
【发布时间】：2023-02-26 18:01:29
【问题描述】：

当我登录时，我发送登录名、setUserToken、setUserData reducer 函数，然后我对它们进行控制台记录，我看到它们的状态已按预期更新。但是当我尝试接收回数据供以后使用时，它是未定义/错误的。

配置 redux 存储 商店.js

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

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

export default store;

创建切片 auth.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 中显示用户名以问候用户。

【问题讨论】：

标签： reactjs redux react-redux state redux-toolkit

【解决方案1】：

我认为你需要明确地从减速器中导出动作

export const { login, setToken, setUserInfo, logout } = authSlice.actions

像这样的东西。

【讨论】：