Я не могу получить обновленное значение из глобального состояния (REDUX) при использовании Material-UI - PullRequest
Новая
       32

Я не могу получить обновленное значение из глобального состояния (REDUX) при использовании Material-UI

0 голосов
/ 03 ноября 2019

Я не могу получить обновленное состояние isAuthenticated, когда у меня есть код Material-UI. Есть ли способ обновить состояние, когда у меня есть код Material-UI. 

import React from "react";
import clsx from "clsx";
import { withStyles } from "@material-ui/core/styles";
import MUILink from "@material-ui/core/Link";
import AppBar from "../UI/components/AppBar";
import Toolbar, { styles as toolbarStyles } from "../UI/components/Toolbar";
import { Link } from "react-router-dom";
import { connect } from 'react-redux';

const styles = theme => ({
  title: {
    fontSize: 24
  },
  placeholder: toolbarStyles(theme).root,
  toolbar: {
    justifyContent: "space-between"
  },
  left: {
    flex: 1
  },
  leftLinkActive: {
    color: theme.palette.common.white
  },
  right: {
    flex: 1,
    display: "flex",
    justifyContent: "flex-end"
  },
  rightLink: {
    fontSize: 16,
    color: theme.palette.common.white,
    marginLeft: theme.spacing(3)
  },
  linkSecondary: {
    color: theme.palette.secondary.main
  }
});

const Navbar = (props,{isAuthenticated,loading}) => {
  const { classes } = props;

  const authLinks = (
    <div className={classes.right}>
      <MUILink
        variant="h6"
        underline="none"
        component={Link} to="/log-out"
        className={clsx(classes.rightLink, classes.linkSecondary)}
      >
        {"Log out"}
      </MUILink>
    </div>
  );


  const guestLinks = (
    <div className={classes.right}>
      <MUILink
        color="inherit"
        variant="h6"
        underline="none"
        component={Link} to="/sign-in"
        className={classes.rightLink}
      >
        {"Sign In"}
      </MUILink>
      <MUILink
        variant="h6"
        underline="none"
        component={Link} to="/sign-up"
        className={clsx(classes.rightLink, classes.linkSecondary)}
      >
        {"Sign Up"}
      </MUILink>
    </div>
  );

  return (
    <div>
      <AppBar position="fixed">
        <Toolbar className={classes.toolbar}>
          <div className={classes.left} />
          <MUILink
            variant="h6"
            underline="none"
            color="inherit"
            className={classes.title}
            component={Link} to="/"
          >
            {"buzzer"}
          </MUILink>
          {!loading && (
              <React.Fragment>{isAuthenticated ? authLinks : guestLinks}</React.Fragment>
          )}
        </Toolbar>
      </AppBar>
      <div className={classes.placeholder} />
    </div>
  );
};

const mapStateToProps = state =>({
  isAuthenticated:state.auth.isAuthenticated,
  loading:state.auth.loading
})

export default connect(mapStateToProps)((withStyles(styles)(Navbar)));

Я хочу, чтобы Navbar менялся в зависимости от условия isAuthenticated. Если пользователь аутентифицирован, я хочу отобразить только authLink, если пользователь не аутентифицирован, я хочу отобразить guestLink.

1 Ответ

0 голосов
/ 04 ноября 2019

{isAuthenticated,loading} будет введено внутрь props, а не как второй параметр: 

const Navbar = (props) => {
  const { classes, isAuthenticated,loading } = props;
...