为什么我的 redux 状态在页面刷新时返回到初始值？

Question

登录后，我的 authState 变为 true，这是预期的。然后它重定向到主页。但在那之后，如果我刷新页面，我的状态会回到初始值。这可能是什么原因？

登录组件：

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;

我的主页组件

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;

我不希望状态在页面刷新时回到初始值。

Answer 1

您的数据未保留。将用户令牌保存在 localStorage 中，当应用程序初始化时验证 localStorage，如果有值，只需使用此数据填充商店。

Answer 2

既然你想存储用户令牌，我建议你使用cookie来存储它，这里是一个link，你可以在其中找到如何创建和使用cookie。

为什么我的 redux 状态在页面刷新时返回到初始值？

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

javascript

reactjs

redux

redux-toolkit