mapDispatchToProps 是要走的路吗？

Question

我正在关注 React+Redux 全栈教程，但讲师做了一些对我不起作用的奇怪事情。

具体来说，在 submitForm() 类中的这些行：

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

正在导致错误：

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);

所以，我尝试将两者都添加：

mapDispatchToProps = (dispatch) => {
            return {
                registerTheUser: (submitData) => {dispatch(registerUser(submitData)) }
            }

和

export default connect(mapDispatchToProps)(Register);

然后改变：

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

到

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

但是，这也没有用。

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

如有必要，我可以添加更多代码。

编辑，操作 registerUser():

export function registerUser(dataToSubmit){
const request = axios.post(`http://localhost:4444/users/create`,dataToSubmit)
    .then(response => response.data);

return {
    type: REGISTER_USER,
    payload: request
}

}

Answer 1

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

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

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

然后像这样使用它

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

第一种方法也是正确的，但是您的调度操作没有返回承诺，因此无法在其上执行 .then。

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

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

    }

}