如何在react redux中维护登录和注销用户的状态，并将该状态共享到主页

Question

登录成功后直接进入主页。但是如何在首页显示用户是登录还是注销呢?这里我附上了我的codesanbox链接。https://codesandbox.io/s/inspiring-rain-olm7wx?file=/src/components/Home.component.jsx

import axios from 'axios';
export const loginAction = {
login,
};
function login(user) {
return (dispatch) => {
var data = {
email: user.email,
password: user.password,
};
axios
.post('https://reqres.in/api/login', data)
.then((res) => {
console.log("res", (res));
alert("response " + JSON.stringify(res.data));
dispatch(setUserLogin(res.data, false));
localStorage.setItem("isLogin", true)
window.location.pathname = "./";
})
.catch(err => {
dispatch(setUserLoginError(err, true));
alert("error" + err);
});
};
}
export function setUserLogin(token, showError) {
return {
type: 'SET_LOGIN_SUCCESS',
token: token,
isLoading: false,
showError: showError,
};
}
export function setUserLoginError(error, showError) {
return {
type: 'SET_LOGIN_ERROR',
error: error,
showError: showError,
};
}

Answer 1

您正在使用redux，因此下面的代码将帮助您确认用户登录或注销

import React from "react";
import { useSelector } from 'react-redux'
export default function Home() {

// https://react-redux.js.org/api/hooks
const isLogin = useSelector((state) => state.login.isLogin)
console.log('isLogin ',isLogin);
return (
<>
<div>This is homepage</div>
<br />
<a href="/login">
<button> LOGIN</button>
</a>
</>
);
}

这里的useSelector钩子可从react-redux，你已经在你的项目。isLogin布尔值可以从redux存储中读取，如果它是true表示用户登录，如果它是false表示用户未登录。

您可以在登录组件中使用reducer设置此isLogin。

更新1

在你的减速机中，我可以看到你没有设置isLogin，设置如下:

const initialState = {
token: '',
showError: false,
error: '',
isLogin: false,
isLoading: false
};
export function login(state = initialState, action) {
switch (action.type) {
case 'SET_LOGIN_SUCCESS':
return {
...state,
token: action.token,
isLogin: true,
isLoading: action.isLoading,
showError: action.showError,
};
case 'SET_LOGIN_ERROR':
return {
...state,
error: action.error,
showError: action.showError,
isLogin: false,
};
default:
return state;
}
}

更新2

你在App.js中获得isLoginfalse，因为你在loginAction.js中获得window.location.pathname = "./";，它将重新加载页面，因此isLogin将重置，因此首先删除它。

你可以试试Login.jsx

中的代码

import { useNavigate } from "react-router-dom";
import { useSelector } from 'react-redux'
function Login(props) {
let navigate = useNavigate();
const isLogin = useSelector((state) => state.login.isLogin)
useEffect(()=>{
if(isLogin){
navigate('/')
}

},[isLogin])
}