Как подключить субкомпоненты к компоненту, связанному с redux?

Если у меня есть два компонента, в одном из которых находятся переменные formData (родительский компонент Login), а в другом хранится сама форма (взято из пользовательского интерфейса материала React), как я смогу соединить эти два компонента, если мне нужно вообще? Поскольку в настоящее время мой токен jwt генерируется на бэкэнде Node, но диспетчер, похоже, не хочет отправлять response.data.

 import React, { Fragment, useState } from "react";
 import { connect } from "react-redux";

 import { login } from "../../actions/auth";
 import SignIn from "../../material/SignIn";

 const Login = ({ login, isAuthenticated }) => {
      const [formData, setFormData] = useState({
           email: "",
           password: ""
      });

      const { email, password } = formData;

      const onChange = e => {
           setFormData({ ...formData, [e.target.name]: e.target.value });
      };

      const onSubmit = e => {
           login(email, password);
      };

      // Redirect if logged in
      if (isAuthenticated) {
           return <Redirect to="/dashboard" />;
      }

      return (
           <Fragment>
                <SignIn
                     email={email}
                     password={password}
                     onSubmit={onSubmit}
                     onChange={onChange}
                     isAuthenticated={isAuthenticated}
                />
           </Fragment>
      );
 };

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

 export default connect(
      mapStateToProps,
      { setAlert, login }
 )(Login);

И компонент SignIn:

 import React, { useState } from "react";
 import Avatar from "@material-ui/core/Avatar";
 import Button from "@material-ui/core/Button";
 import CssBaseline from "@material-ui/core/CssBaseline";
 import TextField from "@material-ui/core/TextField";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Checkbox from "@material-ui/core/Checkbox";
 import Link from "@material-ui/core/Link";
 import Grid from "@material-ui/core/Grid";
 import Box from "@material-ui/core/Box";
 import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
 import Typography from "@material-ui/core/Typography";
 import { makeStyles } from "@material-ui/core/styles";
 import Container from "@material-ui/core/Container";

 function MadeWithLove() {
      return (
      <Typography variant="body2" color="textSecondary" align="center">
           {"Built with love by the "}
           <Link color="inherit" href="https://material-ui.com/">
                Material-UI
           </Link>
           {" team."}
      </Typography>
      );
 }

 const useStyles = makeStyles(theme => ({
      "@global": {
      body: {
           backgroundColor: theme.palette.common.white
      }
      },
      paper: {
           marginTop: theme.spacing(8),
           display: "flex",
           flexDirection: "column",
           alignItems: "center"
      },
      avatar: {
           margin: theme.spacing(1),
           backgroundColor: theme.palette.secondary.main
      },
      form: {
           width: "100%", // Fix IE 11 issue.
           marginTop: theme.spacing(1)
      },
      submit: {
           margin: theme.spacing(3, 0, 2)
      }
 }));

 export default function SignIn({ email, password, onChange, onSubmit }) {
      const classes = useStyles();

      return (
           <Container component="main" maxWidth="xs">
                <CssBaseline />
                <div className={classes.paper}>
                <Avatar className={classes.avatar}>
                     <LockOutlinedIcon />
                </Avatar>
                <Typography component="h1" variant="h5">
                     Sign in
                </Typography>
                <form onSubmit={e => onSubmit(e)} className={classes.form} noValidate>
                     <TextField
                          variant="outlined"
                          margin="normal"
                          required
                          onChange={e => onChange(e)}
                          fullWidth
                          id="email"
                          label="Email Address"
                          name="email"
                          value={email}
                          autoFocus
                     />
                     <TextField
                          variant="outlined"
                          margin="normal"
                          required
                          onChange={e => onChange(e)}
                          fullWidth
                          name="password"
                          label="Password"
                          type="password"
                          value={password}
                          id="password"
                          autoComplete="current-password"
                     />
                     <FormControlLabel
                          control={<Checkbox value="remember" color="primary" />}
                          label="Remember me"
                     />
                     <Button
                          type="submit"
                          fullWidth
                          variant="contained"
                          color="primary"
                          className={classes.submit}
                     >
                     Sign In
                     </Button>
                     <Grid container>
                          <Grid item xs>
                               <Link href="#" variant="body2">
                                    Forgot password?
                               </Link>
                          </Grid>
                               <Grid item>
                               <Link href="#" variant="body2">
                                    {"Don't have an account? Sign Up"}
                               </Link>
                          </Grid>
                     </Grid>
                </form>
                </div>
                <Box mt={5}>
                     <MadeWithLove />
                </Box>
           </Container>
      );
 }

Как я могу подключить компонент входа в систему к компоненту входа в систему?


person Mike K    schedule 04.06.2019    source источник
comment
Зачем нужно подключать SignIn к магазину? Кажется, что Login может передавать всю необходимую информацию через props. Если state.auth.isAuthenticated не обновляется, это может быть проблема с вашим запросом или процессом аутентификации.   -  person Tomer    schedule 05.06.2019


Ответы (1)


Кажется, что поток данных между двумя компонентами в порядке, особенно если серверная часть генерирует правильный токен после получения данных для входа. Ключ к получению данных из серверной части находится в действии login 'thunk'. Впоследствии вам нужно будет отправить другое действие с данными ответа, которые будут обрабатываться редуктором, чтобы обновить хранилище redux.

Быстрый поиск в Google привел меня сюда https://alligator.io/redux/redux-thunk/ что прекрасно демонстрирует пример того, о чем я говорю. Сообщите мне, поможет ли это вам или у вас возникнут дополнительные сомнения!

person Dalofeco    schedule 05.06.2019