Reactjs 如何将子组件连接到redux连接的组件？
如果我有两个组件，一个是formData变量所在的组件（父登录组件），另一个是保存表单本身的组件（取自React material UI），如果我需要，我如何连接这两个组件？因为现在，我的jwt令牌是在节点后端生成的，但是dispatch似乎不想发送response.dataReactjs 如何将子组件连接到redux连接的组件？,reactjs,redux,react-redux,Reactjs,Redux,React Redux,如果我有两个组件，一个是formData变量所在的组件（父登录组件），另一个是保存表单本身的组件（取自React material UI），如果我需要，我如何连接这两个组件？因为现在，我的jwt令牌是在节点后端生成的，但是dispatch似乎不想发送response.data import React, { Fragment, useState } from "react"; import { connect } from "react-redux"; import { login }
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);
如何将登录组件连接到登录组件？这两个组件之间的数据流似乎没有问题，特别是如果您的后端在接收到登录数据时生成了正确的令牌。从后端获取数据的关键在于登录操作。为了更新redux存储，您需要在之后调度另一个操作，该操作包含将由reducer处理的响应数据
一个快速的谷歌搜索把我带到这里，很好地展示了我所说的一个例子。让我知道这是否有助于你或你有任何进一步的怀疑 这两个组件之间的数据流似乎是正常的，特别是当您的后端在接收到登录数据时生成正确的令牌时。从后端获取数据的关键在于登录操作。为了更新redux存储，您需要在之后调度另一个操作，该操作包含将由reducer处理的响应数据
一个快速的谷歌搜索把我带到这里，很好地展示了我所说的一个例子。让我知道这是否有助于你或你有任何进一步的怀疑 为什么需要将
登录连接到商店？似乎Login
可以通过道具传递所需的所有信息。如果state.auth.isAuthenticated
未更新，则可能是您的请求或身份验证过程存在问题。为什么需要将登录
连接到存储？似乎Login
可以通过道具传递所需的所有信息。如果未更新state.auth.isAuthenticated
，则可能是您的请求或身份验证过程出现问题。
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>
);
}