reactjs - React-Redux 连接调度功能组件

Question

我在基于功能的组件中connect遇到了麻烦。dispatch我知道如何连接和调度基于类的组件。

这是我的代码；

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>

  );
}

谁能帮我发送数据或连接？提前致谢