Как решить проблему с нулевым состоянием на первом рендере?

Question

Итак, когда кто-то входит в систему, я хотел отобразить имя пользователя, но как только я вошел в систему, имя пользователя не изменилось. Мне пришлось обновить браузер sh, чтобы увидеть изменения. Кроме того, сначала отображается имя предыдущего вошедшего в систему пользователя, а затем при обновлении sh браузера отображается имя текущего вошедшего в систему пользователя.

Я сохранил данные пользователя в хранилище избыточных данных. но я не знаю, как правильно решить эту проблему рендеринга.

Заголовок. js

import React from "react"
import { Link, withRouter } from "react-router-dom"
import {connect} from "react-redux"
import {logoutUser} from "../actions/index"

class Header extends React.Component {
    handleLogout = () => {
        this.props.dispatch(logoutUser())
        this.props.history.push("/")
    }
    render() {   
        const isUserLoggedIn = this.props.auth.isUserLoggedIn
        const currentUser = this.props && this.props.auth.currentUser

        console.log(currentUser)

        return (
        <nav className="navbar is-clearfix is-fixed-top" role="navigation" aria-label="main navigation">
            <div className="navbar-brand">
                <Link to="/" className="navbar-item" href="https://bulma.io">
                    <h1 className="has-text-weight-semibold is-family-primary is-size-5 is-size-6-mobile is-family-sans-serif">App</h1>
                </Link>

                <a role="button" className="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                </a>
            </div>

            <div id="navbarBasicExample" className="navbar-menu">
                <div className="navbar-start">
                    <div className="navbar-item has-dropdown is-hoverable is-active">
                    </div>
                </div>
                <div className="navbar-end">
                    <div className="navbar-item">
                        <div className="buttons">
                            {   
                                isUserLoggedIn ? 
                            <div>
                                <button onClick={this.handleLogout} className="button is-sucess">
                                    <strong>Logout</strong>
                                </button>

                                    <strong>{currentUser}</strong>
                            </div>

                            :

                            <div>
                                <Link to="/register" className="button is-success">
                                    <strong >Sign up</strong>
                                </Link>
                                <Link to="/login" className="button is-sucess">
                                    <strong>Sign in</strong>
                                </Link>
                            </div>
                            }
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    )
}
}

const mapStateToProps = (state) => {
    return state
}

export default withRouter(connect(mapStateToProps)(Header))

Reducer / Auth. js

const initialState = {
    isAuthInProgress: false,
    isAuthenticated: false,
    authError: null,
    user: null,
    isIdentifyingToken: false,
    currentUser: null,
    isUserLoggedIn: "",
    token: "",
    currentUserName: ""
}

const auth = (state=initialState, action) => {
    switch(action.type) {
        case "AUTH_STARTS":
            return {...state,
                 isAuthInProgress: true,
                 authError: null,
                 isLoggingInUser: true
                }

        case "AUTH_SUCCESS":
            return {...state,
                isAuthInProgress: false,
                authError: null,
                isAuthenticated: true,
                user: action.data,
                isIdentifyingToken: false,
                isUserLoggedIn: true,
            }

        case "AUTH_ERROR":
            return {...state,
                isAuthInProgress: false,
                authError: action.data.error,
                isAuthenticated: false,
                user: null
            }

        case "TOKEN_VERIFICATION_STARTS":
            return {...state,
                isAuthInProgress: true,
                authError: null,
                isIdentifyingToken: true
            } 

        case "SET_CURRENT_USER":
            return {...state,
                isAuthInProgress: false,
                isAuthenticated: true,
                authError: null,
                currentUser: action.data.currentUser,
                isUserLoggedIn: true,
                currentUserName: action.data.currentUserName
            }
        case "LOGOUT_USER":
            return {...state,
                isUserLoggedIn: false,
                token: localStorage.removeItem("authToken"),
            }

        default: 
            return state  
    }
}

export default auth

Действия / индекс. js

export const loginUser = (loginData) => {
    console.log("inside login action")
    return async dispatch => {
        dispatch({ type: "AUTH_STARTS" })

        try {
            const res = await axios.post("http://localhost:3000/api/v1/users/login", loginData)
            dispatch({
                type: "AUTH_SUCCESS",
                data: { user: res.data }
            })

            localStorage.setItem("authToken", res.data.token)

        } catch (err) {
            dispatch({
                type: "AUTH_ERROR",
                data: { error: "Something went wrong" }
            })
        }
    }
}

export const getCurrentUser = (token) => {
    return async dispatch => {
        dispatch({ type: "AUTH_STARTS" })
        try {
            const res = await axios.get("http://localhost:3000/api/v1/users/me", {
                headers: {
                    "Authorization": token
                }   
            })
            dispatch({
                type: "AUTH_SUCCESS",
                data: { user: res.data }
            })

            dispatch({
                type: "SET_CURRENT_USER",
                data: { currentUser: res.data, currentUserName: res.data.currentUser.username }
            })

        } catch (err) {
            dispatch({
                type: "AUTH_ERROR",
                data: { error: "Something went wrong" }
            })
        }
    }
}

export const logoutUser = () => {
    return dispatch => {
        dispatch({type: "LOGOUT_USER"})
    }
}