Обзор

Мне трудно понять синтаксис, который я нахожу в сети, когда дело доходит до обертывания реагирующих компонентов компонентами более высокого порядка для доступа к реквизитам.

В следующем примере (который работает) я должен обернуть компонент с помощью

withFireStore => ReduxForms => Connect => Component

export default withFirestore(
    reduxForm({
        form: "createStudents", validate
    })(connect(
          mapStateToProps,
          mapDispatchToProps)(CreateStudentsForm))
);

Предыстория того, что я пытаюсь сделать

В конечном итоге я пытаюсь получить доступ к реквизитам через функцию проверки, которую я использую как часть библиотеки revalidate.js. Следуя решению из этого сообщения stackoverflow, я не получаю реквизиты, сопоставленные с состоянием из ownProps. Я считаю, что это связано с тем, как я упорядочиваю свои компоненты высшего порядка.

Проблема

На самом деле мне нужен ReduxForm, обернутый соединением, чтобы он мог получить доступ к реквизитам, которые я отображаю из состояния избыточности.

withFireStore => Connect => ReduxForms => Component

Attempt 1

export default withFirestore(
    (connect(
            mapStateToProps,
            mapDispatchToProps
        )
        (reduxForm({
            form: "createStudents", validate
        }))
        (CreateStudentsForm)
    )
);

Cannot call a class as a function

Я думал, что у меня скобки в неправильных местах, но когда я сдвигаю их вот так, я получаю

Attempt #2

export default withFirestore(
    (connect(
            mapStateToProps,
            mapDispatchToProps
        )
        (reduxForm({
            form: "createStudents", validate
        })
        (CreateStudentsForm))
    )
);

Uncaught Invariant Violation: You must pass a component to the function returned by connect.

Вопросы

1. Я нахожу такие функции цепочки очень запутанными, есть ли лучший способ написать это?
2. Как мне написать это, чтобы reduxFrom был обернут соединением, которое должно дать мне доступ к реквизитам в моих формах.

Добавлено к вопросу:

Импорт CreateStudentForm.js

import React, { Component } from "react";
import { reduxForm, Field } from "redux-form";
import {compose} from 'redux';
import { Container, Form, Col, Button } from "react-bootstrap";
import MaterialIcon from '../../material-icon/materialIcon';
import { withFirestore } from "react-redux-firebase";
import { connect } from "react-redux";
import TextInput from "../../forms/textInput";
import { combineValidators, isRequired } from "revalidate";
import { setupStudentForm } from '../../../store/actions/students';

CreateStudentForm импортируется в компонент Stateful с именем modal.js.

Импорт Modal.js

import React, { Component } from "react";
import { connect } from "react-redux";
import { Modal, Button, Row, Col } from "react-bootstrap";
import Aux from '../../hoc/Aux';
import CreateClassForm from "../createClass/createClassForm";
import EditClassForm from "../editClass/editClassForm";
import EditHomeworkForm from "../editHomework/editHomeworkForm";
import CreateHomeworkForm from "../createHomework/createHomeworkForm";
import CreateStudentsForm  from "../createStudents/createStudentsForm";
import { withFirestore } from "react-redux-firebase";