MapDispatchToProps - путь к go?

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 () даже стратегией, которую я должен использовать, чтобы исправить это?

Я могу добавить код, если необходимо.

EDIT, действие 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, вы должны передать первый аргумент как ноль, например

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

    }

}