刷新页面时 Redux Store 设置为空

问题描述

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

Login.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 的属性“名称”。当我搜索此错误时，我知道页面刷新时 redux 存储设置为默认值。然后我发现 redux-persist 将帮助我们将数据存储到本地存储。但是知道我不明白如何应用这个 redux-persist npm 包。请帮我。？ 请告诉我所有这些假设是否正确。？

解决方法

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

我将与您分享用于存储完整的 redux 存储并在浏览器刷新时检索的示例（理想情况下不推荐），您可以保存浏览器刷新所需的唯一数据。

这个方法会在evert store更新时调用

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

当页面刷新时检查天气我们在localStorage中有任何东西

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

如果我们有我们可以在创建商店时传递它

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

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