Why my redux state is go back to intial value on Page Refresh?

Question

After SignIn, my authState becomes true, which is expected. and then It redirected to the home page. But after that If I refresh the page, my state goes back to initial value. what could be the reason of this?

Login Component:

import React, { useState, useEffect } from 'react';
import { toast } from 'react-toastify';
import axios from 'axios';
import { Redirect } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { setCurrentUser } from 'src/store/reducer/authReducer';
import jwtDecode from 'jwt-decode';
import { authenticate, isAuth } from '../helpers/auth';
import Protection from '../assets/Protection.svg';
import useInputState from '../hooks/useInputState';

const Login = (props) => {
  const auth = useSelector((state) => state.auth);
  const [submitted, setSubmitted] = useState(false);
  const [btnText, setBtnText] = useState('Sign In');
  const dispatch = useDispatch();
  const { location } = props;
  const initialValue = { name: '', email: '', password: '' };
  const [state, onChangeHandler, reset] = useInputState(initialValue);

  const { email, password } = state;

  //   submit data to backend
  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      const res = await axios.post(`${process.env.API_URL}/api/signin`, {
        email,
        password,
      });
      reset();
      setSubmitted(true);
      setBtnText('Submitted');
      const { token: jwtToken } = res.data;
      localStorage.setItem('jwtToken', jwtToken);
      const decoded = jwtDecode(jwtToken);
      dispatch(setCurrentUser(decoded));
    } catch (err) {
      const { errors } = err.response.data;
      for (const error of errors) {
        const msg = Object.values(error).toString();
        toast.error(msg);
      }
    }
  };

  useEffect(() => {
    if (location.message) {
      toast.success(location.message);
    }
  }, [location.message]);

  if (submitted && auth.isAuthenticated) {
    return <Redirect to={{ pathname: '/', message: 'You are signed in' }} />;
  }

  return (
    <div className="min-h-screen bg-gray-100 text-gray-900 flex justify-center">
      <div className="max-w-screen-xl m-0 sm:m-20 bg-white shadow sm:rounded-lg flex justify-center flex-1">
        <div className="lg:w-1/2 xl:w-5/12 p-6 sm:p-12">
          <div className="mt-12 flex flex-col items-center">
            <h1 className="text-2xl xl:text-3xl font-extrabold">
              Sign In for MernAuth
            </h1>
            <form
              className="w-full flex-1 mt-8 text-indigo-500"
              onSubmit={handleSubmit}
            >
              <div className="mx-auto max-w-xs relative">
                <input
                  className="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5"
                  type="email"
                  name="email"
                  placeholder="Email"
                  onChange={onChangeHandler}
                  value={email}
                />

                <input
                  className="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5"
                  type="password"
                  name="password"
                  placeholder="Password"
                  onChange={onChangeHandler}
                  value={password}
                />

                <button
                  className="mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 transition-all duration-300 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none border-none outline-none"
                  type="submit"
                >
                  <i className="fas fa-user-plus fa 1x w-6 -ml-2" />
                  <span className="ml-3">{btnText}</span>
                </button>
              </div>
              <div className="my-12 border-b text-center">
                <div className="leading-node px-2 inline-block text-sm text-gray-600 tracking-wide font-medium bg-white transform tranlate-y-1/2">
                  Or sign in with email or social login
                </div>
              </div>

              <div className="flex flex-col items-center">
                <a
                  className="w-full max-w-xs font-bold shadow-sm rounded-lg py-3
           bg-indigo-100 text-gray-800 flex items-center justify-center transition-all duration-300 ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline mt-5"
                  href="/login"
                  target="_self"
                >
                  <i className="fas fa-sign-in-alt fa 1x w-6  -ml-2 text-indigo-500" />
                  <span className="ml-4">Sign Up</span>
                </a>
              </div>
            </form>
          </div>
        </div>
        <div className="flex-1 bg-indigo-100 text-center hidden lg:flex">
          <div
            className="m-12 xl:m-16 w-full bg-contain bg-center bg-no-repeat"
            style={{ backgroundImage: `url(${Protection})` }}
          />
        </div>
      </div>
    </div>
  );
};

export default Login;

my home component

import React, { useEffect } from 'react';
import { toast } from 'react-toastify';

const App = (props) => {
  const { location } = props;
  useEffect(() => {
    if (location.message) {
      toast.success(location.message);
    }
  }, [location.message]);

  return <div>App</div>;
};

export default App;

I don't want the state to go back to its initial value on page refresh.

Answer 1

Since you want to store user token, I would suggest that you use a cookie to store it, here is a link where you can find how to create and use a cookie.

Answer 2

Your data is not persisted. Save the user token in the localStorage and when the app is initializing verify the localStorage and if there have value simply populate the store with this data.