Почему мы не можем использовать UseDispatch в компоненте с отслеживанием состояния?

Question

Почему мы не можем использовать Hook UseDispatch в компоненте с состоянием?

import { useDispatch } from "react-redux";
import { submitData } from "../state/actions";

class FormComponent extends Component {
  constructor(props) {
    super(props);
     this.state = {
       fields: {},
       errors: {}
     };
  }

 submitForm = e => {
    e.preventDefault();
    if (this.validateForm()) {
      useDispatch(submitData(this.state.fields));
    }
  };
}

}

Я создал компонент с состоянием для простой формы с полями, а также отслеживал все данные в state.fields, я хочу использовать метод HookUseDispatch. Почему я не могу использовать Крюк в этом?

Answer 1

При использовании компонента с состоянием (класс, наследуемый от React.Component или PureComponent), вы не можете использовать хук UseDispatch или любые хуки.

Как сказал Дюпокас, хуки доступны только в функциональных компонентах.

Вместо этого вам необходимо подключить компонент к хранилищу с резервированием с помощью утилиты connect из react-redux:

    import { connect } from 'react-redux';

    import { submitData } from "../state/actions";

    class FormComponent extends Component {
        constructor(props) {
            super(props);
            this.state = {
                fields: {},
                errors: {}
            };
        }

        submitForm = e => {
            const { dispatchSubmitData } = this.props;
            e.preventDefault();
            if (this.validateForm()) {
                dispatchSubmitData(this.state.fields);
            }
        };
    }


    const mapStateToProps = null;
    function mapDispatchToProps(dispatch) {
        return {
            dispatchSubmitData: (...args) => dispatch(submitData(...args))
        };
    }

    export connect(mapStateToProps, mapDispatchToProps)(FormComponent);

документация для mapStateToProps