Реакция: Navbar не меняется после того, как токен передан в localalstorage

Question

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

У меня 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));

onSubmitHandlerin 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();
}

действие loginUser

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?

Answer 1

Это потому, что ваш компонент Navbar не подключен к хранилищу Redux и не получает userToken как props.Вот почему, когда ваш редуктор обновляет ваш state, Navbar не перерисовывается.

Кроме того, это всегда лучшая практика для рендеринга чего-либо на основе state или props.Ваш Navbar компонент проверяет непосредственно в localStorage для rendering appropriate view.Измените его на что-то вроде ниже, если вы решите передать userToken как props в Navbar из хранилища или родительского компонента.

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

Answer 2

Вам нужно передать полезную нагрузку в ваш authreducer.Кроме того, event.preventDefault () должен быть написан перед history.push ('/'), или вы можете написать сразу после вызова функции.

Кроме того, в вашем компоненте входа в систему вы должны вызывать такую ​​функцию:

this.props.dispatch(loginuser()) // pass the input params here 
this.props.history.push('/login')

Вам также необходимо подключить ваш компонент к вашему магазину редуксов, как показано ниже -

export default connect (mapStateToProps)(YourComp Name)