title: React.js: How to get and show current user when logged in?
body: <p>In my <strong>React app</strong> I am working in <strong>user login</strong>. My goal is to show current <strong>user's username</strong> when the <strong>user</strong> is <strong>logged in</strong>.<br> I'm fetching the <strong>user data</strong> in <strong>redux actions</strong> and, as I followed some tutorials, I need to get jwt token coming from backend in fetch function. In login Fetch function I'm trying to get and save the <strong>token</strong>(see fetching function), but it shows <strong>undefined</strong> in devtools/localStorage. <br>This is how InitialState updates in LoginSuccess in Reducers.</p>
  <pre><code>state 
  {user: {…}, loading: true, error: &quot;&quot;, isAuthenticated: false, users: {…}}
  error: &quot;&quot;
  isAuthenticated: false
  loading: true
  user: {user: &quot;eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJsb2dnZWRVc…xMTB9.hNsYTKGYIFRsPXw66AhB1o0EXyyfgfRTzOFzqBfjaTg&quot;}
  users: {user: &quot;eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJsb2dnZWRVc…xMTB9.hNsYTKGYIFRsPXw66AhB1o0EXyyfgfRTzOFzqBfjaTg&quot;}
  __proto__: Object
  </code></pre>
  <p>I don't know how to get access to the current <strong>logged in user data</strong>: <strong>username</strong> or <strong>firstName</strong> for instanse. <br>
  Any help will be appreciated.</p>
  <p>Actions</p>
  <pre><code>import axios from 'axios'
  import { Dispatch } from 'redux'
  
  import {
    FETCH_USER_REQUEST,
    UserActions,
    User,
    LOGIN_USER_SUCCESS,
    FETCH_LOGIN_FAILURE,
    LOGOUT,
  } from '../../types/UserType'
  
  export const fetchUserRequest = () =&gt; {
    return {
      type: FETCH_USER_REQUEST,
    }
  }
  
  export const fetchLoginFailure = (error: UserActions) =&gt; {
    return {
      type: FETCH_LOGIN_FAILURE,
      payload: error,
    }
  }
  
  export function logout(): UserActions {
    return {
      type: LOGOUT,
    }
  }
  
  export function loginSuccess(user: User): UserActions {
    return {
      type: LOGIN_USER_SUCCESS,
      payload: {
        user,
      },
    }
  }
  
  export const login = ({ email, password }: any) =&gt; {
    return (dispatch: Dispatch) =&gt; {
      dispatch(fetchUserRequest())
      axios
        .post('http://localhost:8000/logIn', {
          email: email,
          password: password,
        })
        .then((response) =&gt; {
          const users = response.data
            dispatch(loginSuccess(users))
            localStorage.setItem('jwt', users.auth_token)
            console.log('users', users) // undefined
      })
        .catch((error) =&gt; {
          dispatch(fetchLoginFailure(error.message))
        })
    }
  }
  </code></pre>
  <p>Reducer</p>
  <pre><code>import {
    LOGIN_USER_SUCCESS,
    UserActions,
    UserState,
    LOGOUT,
  } from '../../types/UserType'
  
  const initialState: UserState = {
    user: {},
    loading: false,
    error: '',
    isAuthenticated: false,
  }
  
  const UserReducer = (state = initialState, action: UserActions) =&gt; {
    switch (action.type) {
    case LOGIN_USER_SUCCESS:
      console.log('state', state) // initialState update see above
      return {
        ...state,
        loading: false,
        user: action.payload,
        users: action.payload,
        isAuthenticated: true,
        error: '',
      }
    case LOGOUT:
      return {
        ...state,
        isAuthenticated: false,
        user: null,
        users: [],
      }
    default:
      return state
    }
  }
  
  export default UserReducer
  </code></pre>
  <p>And I assume I am going to show user userName or firstName in <strong>logout</strong> component</p>
  <pre><code>import React from 'react'
  import { useDispatch, useSelector } from 'react-redux'
  import { Link } from 'react-router-dom'
  import { Icon, Button } from 'semantic-ui-react'
  
  import { logout } from '../../../redux/User/UserActions'
  import { AppState } from '../../../types'
  
  function Logout() {
      const dispatch = useDispatch()
      const user = useSelector((state: AppState) =&gt; state.user.user)
      console.log('user', user)
  
      const logoutOnClick = () =&gt; {
          dispatch(logout())
          localStorage.clear()
      }
      return (
          &lt;Button
              color=&quot;black&quot;
              as={Link}
              to=&quot;Login&quot;
              name=&quot;logout&quot;
              onClick={logoutOnClick}
          &gt;
              &lt;Icon name=&quot;sign out&quot;&gt; &lt;/Icon&gt;Logout
          &lt;/Button&gt;
      )
  }
  
  export default Logout
  </code></pre>