当 state 更改时重新呈现导航栏

Question

I'm fairly new to react and JSX, and looking for some help!

I have part of my app that pulls state from redux to show if a user is logged in, and I just want to render the navbar component because some things are behind protected routes. Everything is working how I want it to, except that I have to refresh the page to make the changes happen, so I'm looking to just have it update based on the state passed to it when it changes OR could be part of an onclick event in the logout component

Here's the navbar component

export default class Navbar extends Component {

  render() {
  
  const storeAuth = store.getState();
  const isLoggedIn = (storeAuth['auth']['isAuthenticated'])

    if(isLoggedIn){
      return (
        <nav className="navbar navbar-dark bg-dark navbar-expand-lg">
          <Link to="/login" className="navbar-brand">CHK List</Link>
          <div className="collpase navbar-collapse">
          <ul className="navbar-nav mr-auto">
            <li className="navbar-item">
            <Link to="/list" className="nav-link">Daily Checklist </Link>
            </li>
            <li className="navbar-item">
            <Link to="/editlist" className="nav-link">Edit Checklist</Link>
            </li>
            <li className="navbar-item">
            <Link to="/Register" className="nav-link">Register New Users</Link>
            </li>
            <li className="navbar-item">
            <Link to="/Logout" className="nav-link">Logout</Link>
            </li>
          </ul>
          </div>
        </nav>
      );
    }else{
      return (
        <nav className="navbar navbar-dark bg-dark navbar-expand-lg">
          <Link to="/dashboard" className="navbar-brand">CHK List</Link>
          <div className="collpase navbar-collapse">
          <ul className="navbar-nav mr-auto">
          
            <li className="navbar-item">
            <Link to="/login" className="nav-link">Login</Link>
            </li>
          </ul>
          </div>
        </nav>
      );
    }
  }
}

And this is the Logout component where the onclick event

    class Dashboard extends Component {
  onLogoutClick = e => {
    e.preventDefault();
    this.props.logoutUser();
  };

  

  render() {
    
    const { user } = this.props.auth;

    return (
      <div style={{ height: "75vh" }} className="container valign-wrapper">
        <div className="row">
          <div className="landing-copy col s12 center-align">
            <h4>
              <b>Hey {user.name.split(" ")[0]}</b> <p></p>
              <p className="flow-text grey-text text-darken-1">
                Are you sure you want to logout?
              </p>
            </h4>
            <button 
            style={{
                width: "150px",
                borderRadius: "3px",
                letterSpacing: "1.5px",
                marginTop: "1rem"
              }} 
              onClick={this.onLogoutClick} 
              className="btn btn-large waves-effect waves-light hoverable blue accent-3">
              Logout
            </button>
          </div>
        </div>
      </div>
    );
  }
}

Dashboard.propTypes = {
  logoutUser: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired
};

Answer 1

You can try using mapStateToProps function.

import {connect} from 'react-redux';



 class Navbar extends Component {

  render() {
 
  let isLoggedIn = this.props.isLoggedIn 

if(isLoggedIn){
  return (
    <nav className="navbar navbar-dark bg-dark navbar-expand-lg">
      <Link to="/login" className="navbar-brand">CHK List</Link>
      <div className="collpase navbar-collapse">
      <ul className="navbar-nav mr-auto">
        <li className="navbar-item">
        <Link to="/list" className="nav-link">Daily Checklist </Link>
        </li>
        <li className="navbar-item">
        <Link to="/editlist" className="nav-link">Edit Checklist</Link>
        </li>
        <li className="navbar-item">
        <Link to="/Register" className="nav-link">Register New Users</Link>
        </li>
        <li className="navbar-item">
        <Link to="/Logout" className="nav-link">Logout</Link>
        </li>
      </ul>
      </div>
    </nav>
  );
}else{
  return (
    <nav className="navbar navbar-dark bg-dark navbar-expand-lg">
      <Link to="/dashboard" className="navbar-brand">CHK List</Link>
      <div className="collpase navbar-collapse">
      <ul className="navbar-nav mr-auto">
      
        <li className="navbar-item">
        <Link to="/login" className="nav-link">Login</Link>
        </li>
      </ul>
      </div>
    </nav>
  );
}
  }
}

const mapStateToProps=(state)=>{
return {
    isLoggedIn : state.auth.isAuthenticated
}
}
 export default connect(mapStateToProps)(Navbar )