刷新页面时，Redux Store设置为null

Question

Index.js

Redux商店

这是Redux存储文件，我在其中通过调度操作来设置经过身份验证的用户的详细信息。

import { createStore } from "redux";
function reducerFunction(state = {authenticatedUser: null}, action){                      
console.log("It is working");
if(action.type === "USER_LOGIN"){
console.log(action.payload);
return {authenticatedUser: action.payload}
}
return {authenticatedUser: null}
}
export const store = createStore(reducerFunction);

登录.js

这是我的登录页面。当用户成功登录时，我正在调度一个操作来更新redux存储中的状态。在这篇文章中，我正在调度一个操作，以在redux存储中设置经过身份验证的用户详细信息。

import { useState } from "react";
import { Link, useHistory } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
const Login = () => {
const dispatch = useDispatch();
const history = useHistory();
const [email, setemail] = useState("");
const [password, setpassword] = useState("");
const emailChangeHandler = (e) => {
setemail(e.target.value);
};
const passwordChangeHandler = (e) => {
setpassword(e.target.value);
};
const submitHandler = async (e) => {
e.preventDefault();
const userData = {
email,
password,
};
try {
const response = await fetch("/login", {
method: "POST",
body: JSON.stringify(userData),
headers: {
"Content-Type": "application/json",
},
});
const data = await response.json();
console.log(data);
localStorage.setItem("jwt", data.token);
localStorage.setItem("user",
JSON.stringify({
name: data.user.name,
email: data.user.email,
_id: data.user._id,
})
);
dispatch({ type: "USER_LOGIN", payload: data.user });        //Here I am dispatching an action to set the authenticated user details in redux store.
history.push("/");
} catch (e) {
console.log(e);
}
setemail("");
setpassword("");
};
return (
<div className="mycard">
<div className="card auth-card input-field">
<h2>Instagram</h2>
<form onSubmit={submitHandler}>
<input type="text" placeholder="email" onChange={emailChangeHandler} value={email} />
<input type="text" placeholder="password" onChange={passwordChangeHandler} value={password} />
<button className="btn waves-effect waves-light" type="submit" name="action" > Submit </button>
</form>
<p>
<Link to="/signup">Don't have an account?</Link>
</p>
</div>
</div>
);
};
export default Login;

Profile.js

这是经过身份验证的用户配置文件页面。在这里，我通过从redux存储中获取数据来显示经过身份验证的用户的名称authenticatedUser.name

import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import classes from "./Profile.module.css";
const Profile = () => {
const [images, setImages] = useState([]);
const [image, setImage] = useState("");
const [url, setUrl] = useState("");
const dispatch = useDispatch();
const authenticatedUser = useSelector(state => state.authenticatedUser);    //Here I am fetching authenticated user.

useEffect(async() => {
const response = await fetch("/myPost", {
method: "GET",
headers: {
"Authorization": "Bearer " + localStorage.getItem("jwt"),
"Content-Type": "application/json"
}
})
const data = await response.json();
console.log(data);
setImages(data);
}, [])
return (
<div>
<div>
<div>
<img className={classes.profile_image} src="https://images.unsplash.com/photo-1534972195531-d756b9bfa9f2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"/>
</div>
<div >
<h1>{authenticatedUser.name}</h1>
<div>
<h4>80 posts</h4>
<h4>80 followers</h4>
<h4>80 following</h4>
</div>
</div>
</div>
<div className={classes.gallery}>
{images.map(image => {
return <img src={image.image}/>
})}
</div>
</div>
);
}
export default Profile;

主要问题从这里开始。刷新页面时显示错误无法读取null的属性"name">。当我搜索这个错误时，我知道redux存储在页面刷新时设置为默认值。然后我发现redux-persistent将帮助我们将数据存储到本地存储。但是我不知道如何应用这个redux-persistent-npm包。请帮帮我。？请告诉我所有这些假设是对是错。？

Answer 1

Redux数据将被设置为100%真实的初始状态，您可以根据要求使用任何浏览器存储(localStorage/sessionStorage/cookies(。。

我将与您分享存储完整redux存储和在浏览器刷新时检索的示例(理想情况下不推荐(，您只能保存浏览器刷新时所需的数据。

此方法将在每次存储更新时调用

store.subscribe(()=>{
// save a copy to localStorage
localStorage.setItem('reduxState', JSON.stringify(store.getState()))
})

当页面刷新时，检查本地存储中是否有任何内容

const persistedState = localStorage.getItem('reduxState') 
? JSON.parse(localStorage.getItem('reduxState'))
: {}

如果我们有，我们可以在创建商店时通过

const store = createStore(
reducer, 
persistedState,
/* any middleware... */
)

重要提示：理想情况下不建议将完整存储数据存储在localStorage中。。。

Answer 2

如果刷新页面时将Redux存储设置为null，则表示在页面重新加载之间未保持状态。默认情况下，Redux本身不处理状态持久性。

要在页面刷新期间保持Redux状态，可以使用其他库或技术，如浏览器本地存储或会话存储。以下是如何使用本地存储实现状态持久性的示例：

安装redux持久库：

npm install redux-persist

在您的应用程序中使用Redux-Persist设置Redux商店：

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // Defaults to local storage
import rootReducer from './reducers'; // Your root reducer
const persistConfig = {
key: 'root',
storage,
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
export const store = createStore(persistedReducer);
export const persistor = persistStore(store);

在该代码中，persistConfig指定用于持久化Redux状态的密钥和存储方法。persistReducer函数使用持久性配置包装根还原器。存储区和持久存储区将导出以便在应用程序中使用。

使用redux-persisten:中的PersistGate包装您的应用程序组件

import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store';
const App = () => {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
{/* Your application component hierarchy */}
</PersistGate>
</Provider>
);
};
export default App;

请务必查看Redux-Persist文档，了解更多高级配置选项和根据您的特定需求进行的自定义。