页面重新加载后保留 GlobalState

Question

Consider the code below:

Ignore all the axios request:

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));
  };

This pages updates the GlobalContext by changing loggedIn to true and currentUser to "fa".

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

This gets the state and logs it.

Here are the Reducer.js and 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

Everything works beautifully and once I log in, I'm redirected to homepage as I'm supposed to and the correct state is being logged.

But once I refresh on the home page everything is reverted back to the initial state.

I need to retain the state as it will be used to apply the 'IfLoggedIn' logic.

Thanks in advance.

Answer 1

Cookie time (local storage)

Your login request will give your site a cookie that should be stored. when loading the page before anything check if the cookie/session is valid and set the state accoridingly.

Your react state cannot be staved (directly) between hard refreshes