React.js: How to get and show current user when logged in?

Question

In my React app I am working in user login. My goal is to show current user's username when the user is logged in.
I'm fetching the user data in redux actions 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 token(see fetching function), but it shows undefined in devtools/localStorage.
This is how InitialState updates in LoginSuccess in Reducers.

state 
{user: {…}, loading: true, error: "", isAuthenticated: false, users: {…}}
error: ""
isAuthenticated: false
loading: true
user: {user: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJsb2dnZWRVc…xMTB9.hNsYTKGYIFRsPXw66AhB1o0EXyyfgfRTzOFzqBfjaTg"}
users: {user: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJsb2dnZWRVc…xMTB9.hNsYTKGYIFRsPXw66AhB1o0EXyyfgfRTzOFzqBfjaTg"}
__proto__: Object

I don't know how to get access to the current logged in user data: username or firstName for instanse.
Any help will be appreciated.

Actions

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 = () => {
  return {
    type: FETCH_USER_REQUEST,
  }
}

export const fetchLoginFailure = (error: UserActions) => {
  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) => {
  return (dispatch: Dispatch) => {
    dispatch(fetchUserRequest())
    axios
      .post('http://localhost:8000/logIn', {
        email: email,
        password: password,
      })
      .then((response) => {
        const users = response.data
          dispatch(loginSuccess(users))
          localStorage.setItem('jwt', users.auth_token)
          console.log('users', users) // undefined
    })
      .catch((error) => {
        dispatch(fetchLoginFailure(error.message))
      })
  }
}

Reducer

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) => {
  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

And I assume I am going to show user userName or firstName in logout component

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) => state.user.user)
    console.log('user', user)

    const logoutOnClick = () => {
        dispatch(logout())
        localStorage.clear()
    }
    return (
        <Button
            color="black"
            as={Link}
            to="Login"
            name="logout"
            onClick={logoutOnClick}
        >
            <Icon name="sign out"> </Icon>Logout
        </Button>
    )
}

export default Logout

Answer 1

You save your logged-in data to localStorage like auth_token you did and clear in logout function.

 axios
      .post('http://localhost:8000/logIn', {
        email: email,
        password: password,
      })
      .then((response) => {
        const users = response.data
          dispatch(loginSuccess(users))
          localStorage.setItem('jwt', users.auth_token)
          localStorage.setItem('user', JSON.stringify(users))
          console.log('users', users) // undefined
    })
      .catch((error) => {
        dispatch(fetchLoginFailure(error.message))
      })

and access inside your logout component or wherever you need that

let userDetails = JSON.parse(localStorage.getItem('user'));

and clear it inside logout function

const logoutOnClick = () => {
        dispatch(logout())
        localStorage.clear() // already clearing
    }