重新加载页面后保留GlobalState

Question

请考虑以下代码：

忽略所有axios请求：

login.js

const login = async () => {
    let newLogin = {
      email,
      password,
    };

    await axios
      .post("http://localhost:5000/login", newLogin)
      .then((response) => {
        if (response.data === 404) {
          setUserError("User not found. Please Sign Up");
        } else if (response.data === 403) {
          setPasswordError("Incorrect Password");
        } else {
          dispatch({type:'LOG_IN',payload:{LoggedIn:true , currentUser:"Curent user"}})
          navigate("/");
        }
      })
      .catch((err) => console.log(err));
  };

此页面通过将loggedIn更改为true并将currentUser更改为“fa”来更新GlobalContext。

profile.js

import React , {useContext} from 'react'
import '../App.css'
import {Context} from '../GlobalState/Store'

const Profile = () => {

  const [state,dispatch] = useContext(Context);

    console.log(state);
    return (
      <div className="profile-page">
        <div className="personal">
          <h2>First Name:</h2>
          <h2>Last Name:</h2>
          <h2>Resistered Email:</h2>
          <h2>User Name:</h2>
        </div>
        <div className="info">
          <h2>Father Name:</h2>
          <h2>Gender:</h2>
          <h2>CNIC:</h2>
          <h2>Blood Group:</h2>
          <h2>Contact:</h2>
        </div>
        <div className="uni-info">
          <h2>Designation:</h2>
          <h2>Department:</h2>
          <h2>Batch:</h2>
          <h2>Roll No:</h2>
          <h2>Enrolement:</h2>
        </div>
      </div>
    );
}

export default Profile

这将获取状态并记录它。

下面是reducer.js和globalcontext.js：

const Reducer = (state,action) =>{
    switch(action.type){
        case 'LOG_IN':
            return {
                userEmail: action.payload.currentUser,
                loggedIn: action.payload.LoggedIn
            }

        case 'LOG_OUT':
           return {
               userEmail: action.payload.currentUser,
               loggedIn: action.payload.LoggedIn
           }

        default:
            return state;
    }
}


export default Reducer;


import React,{useReducer , createContext} from 'react'
import Reducer from './Reducer';

const initialState ={
    loggedIn: false,
    currentUser:''
}

const Store = ({children}) => {

    const [state , dispatch] = useReducer(Reducer,initialState)
    return (
        <Context.Provider value={[state , dispatch]} >
            {children}
        </Context.Provider>
    )
}


export const Context = createContext(initialState)
export default Store

一切工作都很好，一旦我登录，我就会被重定向到主页，就像我应该做的那样，正确的状态正在被记录。

但是，一旦我刷新了主页，所有的东西就会恢复到初始状态。

我需要保留状态，因为它将用于应用'IFLoggedIn'逻辑。

提前道谢。

Answer 1

您的登录请求将为您的站点提供一个应存储的cookie。在加载页面之前，检查cookie/会话是否有效，并相应地设置状态。

你的反应状态不能在硬刷新之间（直接）被切断