Node.js mapDispatchToProps是我们要走的路吗？

我正在学习React+Redux fullstack的教程，老师做了一些奇怪的事情，但对我来说并不管用

具体来说，在submitForm（）类中，这些行：

正在导致错误：

TypeError: this.props.dispatch(...).then is not a function

这是全班同学：

import React, { Component } from 'react';
import FormField from '../utils/Form/formfield';
import { update, generateData, isFormValid } from '../utils/Form/formActions';
import { connect } from 'react-redux';
import { registerUser } from '../../actions/user_actions';

class Register extends Component {

    state = {
        formError: false,
        formSuccess:false,
        formdata:{
            name: {
                element: 'input',
                value: '',
                config:{
                    name: 'name_input',
                    type: 'text',
                    placeholder: 'Enter your username'
                },
                validation:{
                    required: true
                },
                valid: false,
                touched: false,
                validationMessage:''
            },
            email: {
                element: 'input',
                value: '',
                config:{
                    name: 'email_input',
                    type: 'email',
                    placeholder: 'Enter your email'
                },
                validation:{
                    required: true,
                    email: true
                },
                valid: false,
                touched: false,
                validationMessage:''
            },
            password: {
                element: 'input',
                value: '',
                config:{
                    name: 'password_input',
                    type: 'password',
                    placeholder: 'Enter your password'
                },
                validation:{
                    required: true
                },
                valid: false,
                touched: false,
                validationMessage:''
            },
            confirmPassword: {
                element: 'input',
                value: '',
                config:{
                    name: 'confirm_password_input',
                    type: 'password',
                    placeholder: 'Confirm your password'
                },
                validation:{
                    required: true,
                    confirm: 'password'
                },
                valid: false,
                touched: false,
                validationMessage:''
            }
        }
    }

    updateForm = (element) => {
        const newFormdata = update(element,this.state.formdata,'register');
        this.setState({
            formError: false,
            formdata: newFormdata
        })
    }

    submitForm= (event) =>{
        event.preventDefault();

        let dataToSubmit = generateData(this.state.formdata,'register');
        let formIsValid = isFormValid(this.state.formdata,'register')

        if(formIsValid){
            this.props.dispatch(registerUser(dataToSubmit))
            .then(response =>{ 
                if(response.payload.success){
                    this.setState({
                        formError: false,
                        formSuccess: true
                    });
                    setTimeout(()=>{
                        this.props.history.push('/register_login');
                    },3000)
                } else {
                    this.setState({formError: true})
                }
            }).catch(e => {
                this.setState({formError: true})
            })
        } else {
            this.setState({
                formError: true
            })
        }
    }

    render() {
        return (
            <div className="page_wrapper">
                <div className="container">
                    <div className="register_login_container">
                        <div className="left">
                            <form onSubmit={(event)=>  this.submitForm(event)}>
                            <h2>Personal information</h2>
                                <div className="form_block_two">
                                    <div className="block">
                                        <FormField
                                            id={'name'}
                                            formdata={this.state.formdata.name}
                                            change={(element)=> this.updateForm(element)}
                                        />
                                    </div>

                                </div>
                                <div>
                                    <FormField
                                        id={'email'}
                                        formdata={this.state.formdata.email}
                                        change={(element)=> this.updateForm(element)}
                                    />
                                </div>
                                <h2>Verify password</h2>
                                <div className="form_block_two">
                                    <div className="block">
                                        <FormField
                                            id={'password'}
                                            formdata={this.state.formdata.password}
                                            change={(element)=> this.updateForm(element)}
                                        />
                                    </div>
                                    <div className="block">
                                        <FormField
                                            id={'confirmPassword'}
                                            formdata={this.state.formdata.confirmPassword}
                                            change={(element)=> this.updateForm(element)}
                                        />
                                    </div>
                                </div>
                                <div>
                                    { this.state.formError ?
                                        <div className="error_label">
                                            Please check your data
                                        </div>
                                    :null}
                                    <button onClick={(event)=> this.submitForm(event)}>
                                        Create an account
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>  
            </div>
        );
    }
}

export default connect()(Register);

及

然后改变了：

this.props.dispatch(registerUser(dataToSubmit))
                .then(response =>{

到

然而，这也不起作用

我完全不知道我需要做什么。mapDispatchToProps（）甚至是我应该采取的解决此问题的策略吗

如果需要，我可以添加更多代码

编辑，操作注册表服务器（）：

---

}

mapDispatchToProps

是要连接的第二个参数，第一个参数是

mapStateToProps

要仅提供

mapDispatchToProps

，必须将第一个参数传递为null，就像

export default connect(null, mapDispatchToProps)(Register);

然后像这样使用它

this.props.registerTheUser(dataToSubmit)
        .then(response =>{ 

同样，第一种方法是正确的，但是您的分派操作没有返回承诺，因此

。那么就不能对其执行

确保使用
redux-thunk
中间件并返回承诺

const registerUser = (data) => {
   return dispatch => {
        return API.register('/url', data) // a return statement here for returning promise

    }

}

mapDispatchToProps
是要连接的第二个参数，第一个参数是
mapStateToProps

要仅提供
mapDispatchToProps
，必须将第一个参数传递为null，就像

export default connect(null, mapDispatchToProps)(Register);

然后像这样使用它

this.props.registerTheUser(dataToSubmit)
        .then(response =>{ 

同样，第一种方法是正确的，但是您的分派操作没有返回承诺，因此
。那么就不能对其执行

确保使用
redux-thunk
中间件并返回承诺

const registerUser = (data) => {
   return dispatch => {
        return API.register('/url', data) // a return statement here for returning promise

    }

}

HOC注入一个
dispatch
prop，这就是为什么可以调用它
this.props.dispatch
。也许
registerUser（dataToSubmit）
没有返回对上的“thenable”的承诺？HOC注入一个
dispatch
prop，这就是为什么可以调用它
this.props.dispatch
。也许
registerUser（dataToSubmit）
没有返回对上的“thenable”的承诺？不过，我相信reisterUser（）会返回一个承诺。我已经将它添加到我原来的PostReiserUser（）的底部，我相信，它返回了一个承诺。我已将其添加到我原来的帖子底部
this.props.registerTheUser(dataToSubmit)
        .then(response =>{ 

const registerUser = (data) => {
   return dispatch => {
        return API.register('/url', data) // a return statement here for returning promise

    }

}