React Redux, Uncaught TypeError: this.props.dispatch is not a function, when trying to dispatch a form submit?

Question

I'm not sure what is causing the problem, as I have another component that's almost identical except that the other component is stateless. I'm not sure if that makes a problem? It shouldn't right?

The following code gives me: Uncaught TypeError: this.props.dispatch is not a function at Signup.handleRegister , when trying to submit the form.

import React from 'react';
import { connect } from 'react-redux';
import { registerUser } from '../../actions/index';

export class Signup extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            displayname: "",
            username: "",
            password: ""
        }
    }

    handleRegister = e => {
        e.preventDefault();
        console.log('triggered handle register'); //logs: 'triggered handle register'
        console.log(this.state);                  //logs: {displayname: "", username: "", password: ""}, as intended with empty inputs
        console.log(this.props);                  //logs: {}
        this.props.dispatch(registerUser(this.state));
    }

    render(){
        return (
            <div className="form-container sign-up-container">
                <form className="sign-up-form" onSubmit={this.handleRegister}>
                    <h2>Create Account</h2>
                    <input type="text" placeholder="Display Name" onChange={e => this.setState({ displayname: e.target.value })} />
                    <input type="text" placeholder="Username" onChange={e => this.setState({ username: e.target.value })} />
                    <input type="password" placeholder="Password" onChange={e => this.setState({ password: e.target.value })} />
                    <button className="toggle-btn">Sign Up</button>
                </form>
            </div>
        );
    }
}

const mapStateToProps = state => ({});

export default connect(mapStateToProps)(Signup);

Update: Something like this?

const mapDispatchToProps = dispatch => {
    return {
        //the redux-action here instead of the handleRegister?
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Signup);

Update 2: Following Christopher Ngo suggestion

import React from 'react';
import { connect } from 'react-redux';
import { registerUser } from '../../actions/index';

export class Signup extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            displayname: "",
            username: "",
            password: ""
        }
    }

    handleRegister = e => {
        e.preventDefault();
        console.log('triggered handle register'); //logs: 'triggered handle register'
        console.log(this.state);                  //logs: {displayname: "", username: "", password: ""}, as intended with empty inputs
        console.log(this);                  
//logs: Signup {props: {…}, context{…}, refs: {…}, updater: {…}, handleRegister: ƒ, …}
        this.props.registerUser(this.state);
    }

    render() {
        return (
            <div className="form-container sign-up-container">
                <form className="sign-up-form" onSubmit={this.handleRegister}>
                    <h2>Create Account</h2>
                    <input type="text" placeholder="Display Name" onChange={e => this.setState({ displayname: e.target.value })} />
                    <input type="text" placeholder="Username" onChange={e => this.setState({ username: e.target.value })} />
                    <input type="password" placeholder="Password" onChange={e => this.setState({ password: e.target.value })} />
                    <button className="toggle-btn">Sign Up</button>
                </form>
            </div>
        );
    }
}

// const mapStateToProps = state => ({});

const mapDispatchToProps = (dispatch) => {
    return {
        registerUser: (userInfo) => {
            dispatch(registerUser(userInfo))
        }
    }
}

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

I changed the console log in the handle register to check this and it looks like the Signup component still does not have props or dispatch available to it.

Answer 1

Try it like this:

import React from 'react';
import { connect } from 'react-redux';
import { registerUser } from '../../actions/index';

class Signup extends React.Component {
constructor(props){
    super(props);

    this.state = {
        displayname: "",
        username: "",
        password: ""
    }
}

handleRegister = e => {
    e.preventDefault();
    console.log('triggered handle register'); //logs: 'triggered handle register'
    console.log(this.state);                  //logs: {displayname: "", username: "", password: ""}, as intended with empty inputs
    console.log(this.props);                  //logs: {}
    this.props.registerUser(this.state);
}

render(){
    return (
        <div className="form-container sign-up-container">
            <form className="sign-up-form" onSubmit={this.handleRegister}>
                <h2>Create Account</h2>
                <input type="text" placeholder="Display Name" onChange={e => this.setState({ displayname: e.target.value })} />
                <input type="text" placeholder="Username" onChange={e => this.setState({ username: e.target.value })} />
                <input type="password" placeholder="Password" onChange={e => this.setState({ password: e.target.value })} />
                <button className="toggle-btn">Sign Up</button>
            </form>
        </div>
    );
}
}

const mapStateToProps = state => ({});

const mapDispatchToProps = (dispatch) => {
    return{
      registerUser: (userInfo) => {
         dispatch(registerUser(userInfo))
      }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Signup);

Answer 2

Your connected component is exported as a default export so you need to make sure that you are importing Signup as a default import in your other files and not a named export. In such scenarios its better to not export unconnected components to avoid such mistakes.

Import your signup component like

import Signup from 'path/to/Signup'