Maintain the global state when the route change in React Redux - reactjs

Question

I create a app, everything works fine, but when i move route or reload the page, the state back to the default situation, maybe i able to fix this problem using library as react-persist or found some way to put the state on the local Storage, i don't think this approach is the best way.Maybe you another alternative?
`store.js`
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducer/rootReducer";
const initialState = {};
export default createStore(rootReducer, initialState, applyMiddleware(thunk));
`reducer`
import {
REGISTER_USER,
REGISTER_FAIL,
LOGIN_USER,
LOGIN_FAIL,
// LOAD_USER,
// LOAD_USER_FAIL,
// LOGOUT_USER,
} from "../constants";
const initialState = {
user: null,
loading: true,
isAuthenticated: false,
error: null,
};
export default (state = initialState, action) => {
switch (action.type) {
case REGISTER_USER:
return {
...state,
user: action.payload,
loading: false,
isAuthenticated: true,
error: null,
};
case REGISTER_FAIL:
return {
...state,
user: null,
loading: true,
isAuthenticated: false,
error: action.payload,
};
case LOGIN_USER:
localStorage.setItem("token", action.payload.token);
return {
...state,
user: action.payload,
loading: false,
isAuthenticated: true,
error: null,
};
case LOGIN_FAIL:
return {
...state,
user: null,
loading: true,
isAuthenticated: false,
error: action.payload,
};
default:
return state;
}
};
`Login`
import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Redirect, useHistory } from "react-router-dom";
import { loginAction } from "../actions/loginAction";
const Login = () => {
const dispatch = useDispatch();
const data = useSelector((state) => state.auth);
let history = useHistory();
const [msg, setMsg] = useState("");
const [state, setState] = useState({
email: "",
password: "",
});
useEffect(() => {
let interval;
if (data.error) {
setMsg(data.error.msg);
interval = setTimeout(() => {
setMsg("");
}, 1000);
}
if (data.user) {
setMsg(data.user.msg);
interval = setTimeout(() => {
setMsg("");
}, 1000);
}
return () => {
clearTimeout(interval);
};
}, [data]);
const handleSubmit = (e) => {
e.preventDefault();
dispatch(loginAction(state));
};
const handleChange = (e) => {
setState({ ...state, [e.target.name]: e.target.value });
};
if (data.isAuthenticated) {
history.push("/dashboard");
}
console.log(data);
return (
<>
<span>{msg}</span>
<h1>Login</h1>
<form onSubmit={handleSubmit}>
<input name="email" onChange={handleChange} value={state.email} />
<input name="password" onChange={handleChange} value={state.password} />
<input type="submit" value="Login" />
</form>
</>
);
};
export default Login;
register
import React, { useState, useEffect } from "react";
import { registerAction } from "../actions/registerAction";
import { useDispatch, useSelector } from "react-redux";
import { Redirect } from "react-router-dom";
const Register = () => {
const dispatch = useDispatch();
const data = useSelector((state) => state.auth);
const [msg, setMsg] = useState("");
const [state, setState] = useState({
name: "",
email: "",
password: "",
photo: "",
});
useEffect(() => {
let interval;
if (data.error) {
setMsg(data.error);
interval = setTimeout(() => {
setMsg("");
}, 1000);
}
if (data.user) {
setMsg(data.user.msg);
interval = setTimeout(() => {
setMsg("");
}, 1000);
}
return () => {
clearTimeout(interval);
};
}, [data]);
if (data.user) {
return <Redirect to="/login" />;
}
const handleSubmit = (e) => {
e.preventDefault();
const formData = new FormData();
formData.append("name", state.name);
formData.append("email", state.email);
formData.append("password", state.password);
formData.append("photo", state.photo);
dispatch(registerAction(formData));
};
const handleChange = (e) => {
setState({ ...state, [e.target.name]: e.target.value });
};
const handleOnUploadFile = (e) => {
setState({ ...state, photo: e.target.files[0] });
};
return (
<>
<span>{msg}</span>
<form onSubmit={handleSubmit}>
<label>Name</label>
<input name="name" onChange={handleChange} value={state.name} />
<label>Email</label>
<input name="email" onChange={handleChange} value={state.email} />
<label>Password</label>
<input name="password" onChange={handleChange} value={state.password} />
<input
name="photo"
type="file"
accept="image/*"
onChange={handleOnUploadFile}
/>
<input type="submit" />
</form>
</>
);
};
export default Register;

Answer 1

You should store a token in Local storage and pull it out and verify it upon reload. Also you should make a new action to load user from that token. States will alwayr reset to initial state on reload.
I cant see ur registerAction page but the loadUser should be something like this
// Load User
export const loadUser = () => async (dispatch) => {
try {
const res = await axios.get('/api/auth');
dispatch({
type: USER_LOADED,
payload: res.data,
} catch (err) {
dispatch({
type: AUTH_ERROR,
payload: err.response.data,
});
}
};
/api/auth is like this
// #route GET api/auth
// #desc Get logged in user (Login)
// #access Private
router.get('/', auth, async (req, res) => {
try {
const user = await Planner.findById(req.user.id).select('-password');
if (user.type === 'Admin') {
res.json({ user, admin: true });
} else {
res.json({ user, admin: false });
}
} catch (err) {
console.error(err.message);
res.status(500).send('Server Error');
}
});
You need to use jwttoken for example as an auth middle ware
the middleware file would be like this
const jwt = require('jsonwebtoken');
const config = require('config');
module.exports = function (req, res, next) {
//Get token from header
const token = req.header('x-auth-token');
// Check if not token
if (!token) {
return res.status(401).json({ msg: 'No token, authorization denied' });
}
try {
const decoded = jwt.verify(token, config.get('jwtSecret'));
req.user = decoded.user;
next();
} catch (err) {
res.status(401).json({ msg: 'Token is not valid' });
}
};
I have implemented a similar redux of the contact keeper project by Brad Travery
You can see the full code here am sure it will help
https://github.com/madaher-dev/contact-keeper
Enjoy