When I navigate to the profile page via a link, the component successfully dispatches the actions to set the user's profile and repository and successfully retrieves them with useselector.
However, when I refresh the page, it fails to load the component. Inspect elements show that both the console log statements are null, meaning that profile and repository are null, hence causing the error. The console.log(id) in the useeffect still prints the correct id so I'm baffled why it fails to correctly set profile and repository when I reload the page.
Here is my component:
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { useParams, useNavigate } from 'react-router-dom';
import { getProfileById } from '../../store/actions/profile-actions';
import { getRepositoryById } from '../../store/actions/repository-actions';
const Profile = () => {
const dispatch = useDispatch();
const profile = useSelector(state => state.profile.profile);
const profileLoading = useSelector(state => state.profile.loading);
const auth = useSelector(state => state.auth);
const repository = useSelector(state => state.repository.repository);
const repositoryLoading = useSelector(state => state.repository.loading);
const navigate = useNavigate();
const { id } = useParams();
const allLoading = profileLoading || repositoryLoading;
useEffect(() => {
console.log(id);
dispatch(getProfileById(id));
dispatch(getRepositoryById(id));
}, [getProfileById, getRepositoryById]);
if (auth.isAuthenticated && !auth.loading && auth.user._id === profile.user._id) {
navigate("/dashboard");
}
console.log(profile);
console.log(repository);
return (
<div>
{!allLoading && <div className='mt-20 text-5xl'>
{profile.bio}
{repository.lists.map(list => <p>{list.name}</p>)}
</div>}
</div>
)
}
export default Profile;
