React-Redux Подключение базового компонента функции для отправки в реквизит

Question

Я пытаюсь заполнить данные в реквизитах. Я ЗНАЮ REACT-REDUX, но не понимаю, как подключить компонент, основанный на функции

, это мой фрагмент:

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

// import { connect } from "react-redux";

export default function TextFields(props) {

  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,
      email: values.email
    }
    console.log(data)
    props.dispatch({type: 'SUBMIT', data})
  }

  return (
    <React.Fragment>

      <form noValidate autoComplete="off">
       <TextField
        id=""
        label="SSN"
        value={values.ssn}
        onChange={handleChange('ssn')}
        type="number"
        name='ssn'
      />
       <TextField
        id=""
        label="Email"
        value={values.email}
        onChange={handleChange('email')}
        type="email"
        name='email'
      />

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

  );
}

Я хочу, чтобы, когда пользователь заполнил форму и нажал кнопку подтверждения, она должна отправитьданные для реквизита.

Я пытался с подобным props.dispatch({type: 'SUBMIT', data})

, но из-за ошибки диспетчеризация не является функцией. Может ли кто-нибудь помочь мне подключить Redux для отправки данных?

Answer 1

добро пожаловать в переполнение стека.

Для начала вам необходимо составить карту, чтобы выполнить действия по отправке. Вы можете сделать это, создав функцию-функцию-стрелку, которая возвращает реквизит, например, так (если вы используете функцию для выполнения действия, обязательно ИМПОРТИРУЙТЕ эту функцию):

const mapDispatchToProps = (dispatch) => {
 return {
 someAction: () => dispatch(actionFunction())
}
}

Вы также можете напрямую отправить тип действия:

const mapDispatchToProps = (dispatch) => {
 return {
 someAction: () => dispatch({type: "ACTION_TYPE"})
}
}

, а затем подключить его к функции:

export default connect ({}, mapDispatchToProps) (yourComponent);

Вы можете увидеть больше в документе ниже: https://react -redux.js.org / с использованием реагирующей-перевождь / Connect-mapdispatch