Estoy realizando un login y registro de usuarios en React con los hooks use context y use reducer.- Mi consulta va orientada a como implementar la persistencia de la informacion de un usuario que se ha logueado durante todo lo que dure su sesion. Hasta ahora solo logro mostrar el nombre de usuario cuando se loguea, pero al actualizar la pagina pierdo esa informacion.
Initial State
userActive: null
AuthActions
const respuesta = await clienteAxios.post("/api/account/login", datos);
console.log(respuesta.data);
Swal.fire("Correcto", "El usuario se logueo correctamente", "success");
//jwt decode
const decoded = jwt_decode(respuesta.data.token);
console.log(decoded.unique_name);
dispatch({
type: LOGIN_EXITOSO,
payload: {
token: respuesta.data.token,
userActive: decoded.unique_name,
},
});
//usuarioAutenticado()
history.push("/usuarios");
} catch (error) {
console.log(error.response);
if (error.response.status === 400) {
ErrorAutenticacion();
} else if (error.response.status === 500) {
ErrorServidor();
}
dispatch({
type: LOGIN_ERROR,
});
} finally {
ocultarSpinner();
}
Auth Reducer
case LOGIN_EXITOSO:
localStorage.setItem("token", action.payload.token);
return {
...state,
userActive: action.payload.userActive
};
/*case OBTENER_USUARIO:
return{
...state,
userActive: action.payload
}
*/
Componente donde quisiera mostrar esa informacion del usuario
const { userActive } = authContext;
En el use effect de este componente no tengo nada relacionado a cargar informacion de este usuario cada vez que el componente se monta. Agradezco cualquier ayuda