如何根据用户 Redux state 有条件地呈现登录或仪表板？

Question

这是我的代码：

// Components 
import Dashboard from './Dashboard'; 
import Login from './Authentication/Login'; 
import { Route } from "react-router-dom";

// Redux import { useSelector, useDispatch } from 'react-redux'; 
import { selectUser } from '../userSlice';

function Authentication() {

    // Redux to manage user state
    var user = useSelector(selectUser); // Use the userReducer called "user"

    return (
    <>
        {user ? <Dashboard /> : <Login />}
    </>
    )
}

export default Authentication;

这是我的商店和我的切片：

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

export default configureStore({ 
    reducer: { 
        user: userReducer, 
    }, 
});

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

const initialState = { user: null, };

export const userSlice = createSlice({ 
    name: "user", 
    initialState, 
    reducers: { 
        login: (state, action) => { state.user = action.payload; }, 
        logout: (state) => { state.user = null; } }, 
    }
);

export const { login, logout } = userSlice.actions;
export const selectUser = (state) => state.user.user; 
export default userSlice.reducer;

但是，我不确定这是否是 go 的最佳方式。 我想确保如果用户 state 是 null，那么我们 go 登录，否则我们 go 到仪表板。

这是我的登录代码：

// Imports
import react from 'react'
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import jwt_decode from "jwt-decode";

// Redux
import { useSelector, useDispatch } from 'react-redux';
import { login, selectUser } from '../../userSlice';


// Styling
import Container from '@mui/material/Container';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';

// Google O-Auth
import { GoogleLogin } from 'react-google-login';
import Signup from './Signup';
const clientID = "743792005372-l001hnasupsvimqur3hq32pe8ngje3rr.apps.googleusercontent.com"

function Login() {

    // Step 1: Add O-Auth functionality 
    // Step 2: Add onClick functionality after submission 
    // Step 3: Add useNavigate hook from React Router to redirect to user-specific Dashboard


    // Redux to manage user state
    const user = useSelector(state => state.user); // Use the userReducer called "user"
    const dispatch = useDispatch(); // Use the dispatch function to update the userReducer

    // const [ user, setUser ] = useState({});
    const navigate = useNavigate();


    function handleCallbackResponse(response) {
        var userObject = jwt_decode(response.credential);
        console.log("User logged in successfully!");
        console.log(userObject);

        // Use Redux to set state of user
        dispatch(login(userObject)); // Here, login is the action and userObject is the action.payload 

        navigate('/dashboard');
    }

    useEffect(() => {
        /*global google*/
        google.accounts.id.initialize({
            client_id: clientID,
            callback: handleCallbackResponse
        });

        google.accounts.id.renderButton(
            document.getElementById('signInButton'),
            { theme: 'outline', size: 'large', type: 'standard' }
       );

    }, []);



    return (
        <Container align="center" sx={{ mt: '2rem' }}>
            <Typography variant="h3">Welcome to</Typography>
            <Typography variant="h1">ReadHub</Typography>


            <Box id="signInButton" sx={{ m: 4 }}>
                {/* <GoogleLogin
                    clientId={clientID}
                    buttonText={"Login"}
                    onSuccess={onSuccess}
                    onFailure={onFailure}
                    cookiePolicy={'single_host_origin'}
                    isSignedIn={true}
                /> */}
            </Box>


        </Container>
    );
}
export default Login;

现在，问题是：在重新加载并转到根路由（“/”）时，这是呈现身份验证组件的地方，所需的行为是 - 如果已登录，则 go 重定向到仪表板。 但是，我只是得到一个带有模糊错误“登录组件错误”的白屏。

Answer 1

在我看来，你必须添加一个状态属性，这将有三种可能的状态， 'checking' ， 'authenticated'或'not-authenticated' ，你可以将它添加到你的 userSlice 中，初始 state 这将be 'checking' ，当您完成用户的身份验证时，根据此结果将其设置为'authenticated'或'not-authenticated' 。

如果你不等待用户完成加载，登录屏幕将首先呈现，你正在发生的事情就会发生。 要更正它，您只需在组件中执行以下操作：

function Authentication() {

    // Redux to manage user state
    var user = useSelector( selectUser ); // Use the userReducer called "user"

    var status = useSelector( selectStatus );
    // status = 'not-authenticated'; // 'authenticated'; // 'not-authenticated';

    if ( status === 'checking' ) {
        return (
            <Loading />
        );
    }

    return (
        <>
            {
                status === 'authenticated'
                    ? <Dashboard />
                    : <Login />
            }
        </>
    );
}

一切顺利。 我希望它能帮助你。