Реакция: панель навигации не меняется после передачи токена в localstorage

Я написал компонент навигационной панели, создал 2 константные функции, чтобы отображать их в соответствии с появлением «токена пользователя» в локальном хранилище. После входа в систему с правильными данными я получаю токен пользователя, и он сохраняется в локальном хранилище. Однако он не выполняет повторную визуализацию навигационной панели сразу после того, как маркер пользователя помещается в локальное хранилище. Когда я обновляю страницу, она перерисовывается.

У меня loginForm подключен к состоянию Redux.

Navbar.js

import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';

import './Navbar.css'

class Navbar extends Component {

 logOutHandler(e) {
  e.preventDefault()
  localStorage.removeItem('usertoken')
  this.props.history.push('/login')
 }

 render() {
  const loginRegistrationLink = (
   <ul className='navbar-navigation-dynamic'>
    <li className='navbar-navigation-item'>
      <Link to='/login' className='navbar-navigation-link'>
        Login
      </Link>
    </li>
    <li className='navbar-navigation-item'>
      <Link to='/register' className='navbar-navigation-link'>
        Register
      </Link>
    </li>
  </ul>
)
const profileLink = (
  <ul className='navbar-navigation-dynamic'>
    <li className='navbar-navigation-item'>
      <Link to='/profile' className='navbar-navigation-link'>
        Account
      </Link>
    </li>
    <li className='navbar-navigation-item'>
      <a href='#' onClick = {this.logOutHandler.bind(this)} className='navbar-navigation-link'>
        Logout
      </a>
    </li>
  </ul>
)

return (
  <div className='navbar'>
    <ul className = "navbar-navigation">
      <li className = "navbar-navigation-item">
        <Link to='/' className='navbar-navigation-link'>
          Home
        </Link>
      </li>
    </ul>
    {localStorage.usertoken ? profileLink : loginRegistrationLink}
  </div>
  )
 }
}

const mapStateToProps = (state) => ({
 user: state.auth
});

export default connect(mapStateToProps, {})(withRouter(Navbar));

onSubmitHandler в LoginForm.js

  onSubmitHandler = (e) => {

const { user_name, password } = this.state

      const loggedUser = {
      user_name: user_name,
      password: password
    }
    this.props.loginUser(loggedUser);

    this.setState({
      user_name: '',
      password: ''
    })
  this.props.history.push('/')
  e.preventDefault();
}

действие пользователя

export const loginUser = user => dispatch => {
 axios.post('https://damianlibrary.herokuapp.com/users/login', user)
  .then(res => dispatch({
   type: LOGIN_USER,
   payload: localStorage.setItem('usertoken', res.data)
 }))
}

authReducer.js

import { LOGIN_USER, REGISTER_USER } from '../actions/types';

const authState = {
 users: [],
 status: ''
}

export default function(state = authState, action) {
 switch(action.type) {
  case LOGIN_USER:
   return {
    ...state,
    token: action.payload
   };
  case REGISTER_USER:
   return {
    ...state,
    users: [action.payload, ...state.users], 
    status: action.status
  };
 default:
  return state;
 }
}

Есть ли что-то, связанное с тем, что я не пропустил токен в своем authReducer?