Reactjs React Redux连接并分派功能组件

在基于功能的组件中，我遇到了连接

和
调度
的麻烦。我知道如何连接和分派基于类的组件

这是我的密码

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import SaveIcon from '@material-ui/icons/Save';
import { connect } from "react-redux";

const useStyles = makeStyles(theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    width: 200,
  },
  dense: {
    marginTop: 19,
  },
  menu: {
    width: 200,
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
  button: {
    margin: theme.spacing(1),
  },
}));



export default function TextFields() {

  const classes = useStyles();
  const [values, setValues] = React.useState({
    ssn: '',
    phone: '',
    email: '',
    multiline: 'Controlled',
  });

  const handleChange = name => event => {
    setValues({ ...values, [name]: event.target.value });
  };

  const onSubmit = () => {
    const data = {
      ssn: values.ssn,
      phone: values.phone,
      email: values.email
    }
    console.log(data)
    this.props.dispatch({type: 'SUBMIT', data})
  }

  return (
    <React.Fragment>
    <Grid item xs={12}>
      <Paper className={classes.paper}>xs=12</Paper>
    </Grid>

      <form className={classes.container} noValidate autoComplete="off">
       <TextField
        id=""
        label="SSN"
        value={values.ssn}
        onChange={handleChange('ssn')}
        type="number"
        className={classes.textField}
        name='ssn'

        margin="normal"
      />
       <TextField
        id=""
        label="Phone"
        value={values.phone}
        onChange={handleChange('phone')}
        type="number"
        className={classes.textField}
        name='phone'

        margin="normal"
      />
       <TextField
        id=""
        label="Email"
        value={values.email}
        onChange={handleChange('email')}
        type="email"
        className={classes.textField}
        margin="normal"
        name='email'
      />

      <Button
        onClick={() => onSubmit()}
        variant="contained"
        color="primary"
        size="small"
        className={classes.button}
        startIcon={<SaveIcon />}
      >
        Save
      </Button>
    </form>
    </React.Fragment>

  );
}

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Button”导入按钮；
从“@material ui/icons/Save”导入SaveIcon；
从“react redux”导入{connect}；
const useStyles=makeStyles（主题=>({
容器：{
显示：“flex”，
flexWrap:“wrap”，
},
文本字段：{
边缘左侧：主题。间距（1），
边缘光：主题。间距（1），
宽度：200，
},
密集的：{
玛金托普：19，
},
菜单：{
宽度：200，
},
论文：{
填充：主题。间距（2），
textAlign:'中心'，
颜色：theme.palete.text.secondary，
},
按钮：{
边距：主题。间距（1），
},
}));
导出默认函数TextFields（）{
const classes=useStyles（）；
const[values，setValues]=React.useState({
ssn:“”，
电话：''，
电子邮件：“”，
多行：“受控”，
});
const handleChange=name=>event=>{
setValues（{…值，[名称]：event.target.value}）；
};
const onSubmit=（）=>{
常数数据={
ssn:values.ssn，
电话：values.phone，
电子邮件：values.email
}
console.log（数据）
this.props.dispatch（{type:'SUBMIT'，data}）
}
返回(
xs=12
onSubmit（）}
variant=“包含”
color=“primary”
size=“小”
className={classes.button}
startIcon={}
>
拯救
);
}

有人能帮我发送数据或连接吗？提前谢谢
您看过文档了吗？它使用函数组件作为示例。道具作为参数传递给组件。因此，您的组件将是
函数文本字段（props）{…
您将使用
props…
而不是
这个.props…
。以与类组件相同的方式连接函数。文档甚至链接到一个CodeSandbox示例应用程序，该应用程序将回答您的问题：谢谢您的帮助，但我无法连接。您能帮助我如何连接吗？