Waiting for Context to update - reactjs

Question

I am using React Context to store the logged-in users credentials and have created a reducer/action pattern to handle the logic. Right now, I'm able to successfully login with the proper credentials, but I also want to redirect the user to his profile with a dynamic param like so: profile/:id. My problem is, I'm not sure how to access the user's id in the same function as the initial call to Context where I populate it with the user's login credentials. So far, I have:
function Login(props) {
const userContext = useContext(UserContext);
const [credentials, setCredentials] = useState({
username: '',
password: ''
});
async function onSubmit (e) {
e.preventDefault();
const user = await userContext.loginUser(credentials); // Wait for payload...
props.push.history(`/profile${user.id}`); // ...Then use payload (user.id) to redirect to desired endpoint
}
For reference, here is my loginUser action:
const loginUser = async credentials => {
setLoading();
const response = await axios
.post('endpoint here', credentials)
dispatch({
type: LOGIN_USER,
payload: response.data
})
}
And here is my reducer with my initial state below it:
export default (state, action) => {
switch(action.type) {
case SET_LOADING:
return {
...state,
loading: true
}
case LOGIN_USER:
return {
...state,
user: action.payload,
loading: false
}
default:
return state;
}
}
const initialState = {
user: {},
issues: [],
loading: false
}
Hopefully, this is enough for someone to spot my shortcoming. Any help is appreciated.