Current user data after login in React-Redux - reactjs

Question

I'm working on an auth system in React-Redux.After successfull login, I want to keep the current data.I can't do it right tho.
ACTIONS CODE:
// ** LOGIN USER **
export const login = ({ email, password }) => (dispatch) => {
const body = JSON.stringify({ email, password });
axios
.post('/login', body, getHeaders())
.then(console.log(body))
.then((res) => {
dispatch({
type: LOGIN_SUCCESS,
payload: res.data,
});
history.push('/');
})
.then(() => {
dispatch({
type: USER_LOADED,
});
})
.catch((err) => {
console.log(err);
dispatch(returnErrors(err.message, err.id, 'LOGIN_FAIL'));
dispatch({
type: LOGIN_FAIL,
});
});
};
How can I store the user data in USER_LOADED type?It works only before the first reload.
REDUCERS CODE:
const initialState = {
token: localStorage.getItem('token'),
isAuthenticated: null,
isLoading: false,
user: null,
profileInitialized: false,
profileData: null,
};
export default function (state = initialState, action) {
switch (action.type) {
// USER AUTHENTICATION
case USER_LOADING:
return {
...state,
isLoading: true,
};
case USER_LOADED:
return {
...state,
...action.payload,
isAuthenticated: true,
isLoading: false,
};
case LOGIN_SUCCESS:
case REGISTER_SUCCESS:
localStorage.setItem('token', action.payload.token);
return {
...state,
...action.payload,
isAuthenticated: true,
isLoading: false,
};
case AUTH_ERROR:
case LOGIN_FAIL:
case LOGOUT_SUCCESS:
case REGISTER_FAIL:
localStorage.removeItem('token');
+++
I should add that JWT stays after reload so user is connected but with no username shown for example.
Right after the login redirect
After Reload
I know the code
.then(() => {
dispatch({
type: USER_LOADED,
});
})
is wrong but I don't know how to make it work

Answer 1

I assume the user data is from POST /login. If this is the case, I think you need to remove .then(console.log(body)) first, since it doesn't return the response to the next .then function. Also, you need to return the user data down the promise chain. I hope that helps.
axios
.post('/login', body, getHeaders())
.then((res) => {
dispatch({
type: LOGIN_SUCCESS,
payload: res.data,
});
history.push('/');
return res.data; // pass the user data down to the promise chain
}).then((user) => {
dispatch({
type: USER_LOADED,
payload: user
});
})
EDIT
Based on the comment in the original question. The question is about persisting data in browser and pull it back when USER_LOADED is triggered.
I think you can use the local storage to store the user information just like how you do it with token for the initialState. So it will always try to use saved user info.
After the POST call, you can add the user info from the payload into the local storage. So it will still be available after page refresh.
axios
.post('/login', body, getHeaders())
.then((res) => {
dispatch({
type: LOGIN_SUCCESS,
payload: res.data,
});
// I assume user data is part of the `POST /login` payload
localStorage.setItem('user', res.data.user)
history.push('/');
return res.data; // pass the user data down to the promise chain
})
I hope this answers your question.