React redux-页面刷新后丢失状态

Question

我正在开发一个需要身份验证的项目，并且我在使用 redux 存储注册后存储用户信息。我对标题组件进行了测试（如果有用户则将显示注销，否则将显示头像），问题是我可以将新用户信息发送到商店，但是当我刷新页面时，我失去存储状态（返回到 null） 我的用户切片代码：

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { fetchCount } from './counterAPI';

const initialState = {
  value: 0,
  status: 'idle',
};

export const incrementAsync = createAsyncThunk(
  'counter/fetchCount',
  async (amount) => {
    const response = await fetchCount(amount);
    // The value we return becomes the `fulfilled` action payload
    return response.data;
  }
);

export const userSlice = createSlice({
  name: 'user',
  initialState: {
    user:null,
  },
  reducers: {
    login: (state, action) => {
      state.user = action.payload;
    },
    logout: (state) => {
      state.user = null;
    },
  },
});

export const { login, logout} = userSlice.actions;

export const selectUser = (state) => state.user.user;


export default userSlice.reducer;

我的注册组件：

import React, {useState} from 'react'
import '../../styles/auth/register.css'
import Footer from '../Footer.jsx';
import {Link} from 'react-router-dom'
import axios from 'axios'
import {useHistory} from 'react-router-dom'
import {useSelector, useDispatch} from 'react-redux'
import {selectUser, login, logout} from '../../features/userSlice'
const Register = () => {
    const user = useSelector(selectUser)
    const dispatch = useDispatch()
    const history = useHistory()
    const [loading, setLoading] = useState(false)
    const [registerInputs, setRegsiterInputs] = useState({
        email:'',
        full_name:'',
        user_name:'',
        password: '',
    })
    const changeInput = (e) => {
        e.persist()
        setRegsiterInputs({...registerInputs, [e.target.name] : e.target.value})
    }

    const register = (e) => {
        e.preventDefault()
        setLoading(true)
        const data = {
            full_name : registerInputs.full_name,
            user_name : registerInputs.user_name,
            password : registerInputs.password,
            email : registerInputs.email
        }

        axios.get('/sanctum/csrf-cookie').then(response => {
            axios.post('api/register', data).then((res) => {
                if(res.data.success) {
                    dispatch(login({
                        email: res.data.data.email,
                        full_name: res.data.data.full_name,
                        user_name : res.data.data.user_name
                    }))
                    console.log(user)
                    history.push('/')
                }else {
                    alert('Please fill all the information needed')
                }
            })
        });
        setLoading(false)
        
    }
    return  <div className="register">
    <div className="register__container">
            <div className="register__form">
                <div className="register__form__header">
                    <h3>𝓘𝓷𝓼𝓽𝓪𝓰𝓻𝓪𝓶</h3>
                    <div className="header_p">
                        <p>Inscrivez-vous pour voir les photos et vidéos de vos amis.</p>
                    </div>
                    <button>Se connecter Avec facebook</button>
                </div>

                <div className="register__form__body">
                    <form>
                        <input name="email" value={registerInputs.email} onChange={changeInput} type ="text" placeholder="Email"/>
                        <input name="full_name" value={registerInputs.full_name} onChange={changeInput} type ="text" placeholder="Nom Complet"/>
                        <input name="user_name" value={registerInputs.user_name} onChange={changeInput} type ="text" placeholder="Nom d'utilisateur"/>
                        <input name="password" value={registerInputs.password} onChange={changeInput} type ="password" placeholder="Mot de passe"/>
                        <button disabled={loading} onClick={register} type="submit">Insctiption</button>
                    </form>
                </div>

                <div className="register__form__footer">
                    <p>
                    En vous inscrivant, vous acceptez nos Conditions générales, notre Politique d’utilisation des données et notre Politique d’utilisation des cookies. 
                    </p>
                </div>
            </div>
            <div className="register__ignore">
                <p>Vous avez un compte? <Link to ="/login">Connectez-vous</Link></p>
            </div>

    </div>
    <Footer />
    </div>
}

export default Register;

我应该做哪些更改来防止重新加载页面后丢失 redux 状态？ 先谢谢你了

Answer 1

您的 Redux 存储存储在内存中，因此每次刷新/导航时都会清除它。为了防止这种情况，您必须将存储转储到一些非易失性存储，例如

LocalStorage

。然后您可以加载它并传递到您的商店。

有

redux-persist

库会自动为您完成此操作。

Answer 2

确保您正确地从一个页面导航到另一个页面

不好

   const handleClick = () => { // LIKELY LOSE redux/store
      window.location.href = "/dashboard");
   };

...

   <a href="/dashboard">Link</a> <!--PROBLEMATIC-->

好

   const navigate = useNavigate(); // CORRECT

   const handleClick = () => {
      navigate("/dashboard");
   };