_This2 not a function error when dispatching action

Question

Background

I am working on a very routine chunk of code, I have created actions and reducers many times throughout my app. I am now setting up authentication, and have two containers loading based on routes / & /register.

Issue

I am trying to dispatch an action, and do a simple console.log("test"). I have done this many times before, in-fact, I have literally duplicated a container and altered the names of the dispatched action names. One container works, while the other is hitting me with:

Uncaught TypeError: _this2.propsregisterHandler is not a function

I am confused why its not showing a . between props and registerHandler

Here is the relevent code:

Container Import

import { register } from "../../store/actions/authentication";

JSX

 <div
  className="btn btn-primary col"
  onClick={() =>
    this.props.registerHandler(
      this.state.email,
      this.state.password
    )
  }
>
  Register
</div>

....

Disptach Code

const mapStateToProps = state => {
  return {};
};

const mapDisptachToProps = dispatch => {
  return {
    registerHandler: () => dispatch(register())
  };
};

export default connect(
  mapStateToProps,
  mapDisptachToProps
)(Register);

The action

import * as actionTypes from "./actiontypes";

export const register = () => {
  console.log("TEST");
  return { type: actionTypes.REGISTER };
};

Reducer

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case actiontypes.REGISTER: {
      console.log("you called the reducer");
      return state;
    }

Revised

This code here does not work, I always get the error, however if I call the same action in my login component, it will work.

import React, { Component } from "react";
import { connect } from "react-redux";
import { registerUserToApp } from "../../store/actions/authentication";
import "../Login/login";

export class Register extends Component {
  state = {
    email: "",
    password: ""
  };

  render() {
    return (
      <div
        className="btn btn-primary"
        onClick={() => {
          this.props.registerUserToAppHandler();
        }}
      >
        Register
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {};
};

const mapDispatchToProps = dispatch => {
  return {
    registerUserToAppHandler: () => dispatch(registerUserToApp())
  };
};

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

login Component

import React, { Component } from "react";
import { connect } from "react-redux";
import Aux from "../../components/hoc/Aux";
import Logo from "../../assets/images/Logo.png";
import GoogleLogo from "../../assets/images/google.svg";
import {
  loginUser,
  loginUserWithGoogle,
  registerUserToApp
} from "../../store/actions/authentication";

import "./login.css";

export class Login extends Component {
  state = {
    email: "",
    password: ""
  };

  render() {
    const userNameChangeHandler = event => {
      this.setState({
        email: event.target.value
      });
    };

    const passworChangeHandler = event => {
      this.setState({
        password: event.target.value
      });
    };

    return (
      <Aux>
       ...
                    <div
                      className="btn btn-primary col"
                      onClick={() => {
                        this.props.loginUserHandler(
                          this.state.email,
                          this.state.password
                        );
                        this.props.registerUserToAppHandler();
                      }}
                    >
                      Sign In
                    </div>
                    ...
      </Aux>
    );
  }
}

const mapStateToProps = state => {
  return {};
};

const mapDisptachToProps = dispatch => {
  return {
    loginUserHandler: (email, password) => dispatch(loginUser(email, password)),
    registerUserToAppHandler: () => dispatch(registerUserToApp()),
    loginUserWithGoogleHandler: () => dispatch(loginUserWithGoogle())
  };
};

export default connect(
  mapStateToProps,
  mapDisptachToProps
)(Login);

I don't know if this is the cause of your issue, but when you are using `registerHandler` you are passing in arguments, but when you've defined the function there are no parameters set. — Chaim Friedman, Jul 03 '18 at 23:17
I tried your code and it works as it is. So, problem should be in some part of other code we can't see here. By the way, it is not so important but you have typo as `mapDisptachToProps`. But this does not affect the code since you are doing the same typo in your connect part. — devserkan, Jul 03 '18 at 23:36
I agree with @devserkan, I was not able to recreate the problem — Tadas Antanavicius, Jul 03 '18 at 23:48
There must be something to do with routes, this same structure is used for the login component, I even call the same action from there and everything works. — Bromox, Jul 04 '18 at 00:56
I added in a sample component thats failing and the login component that is working. only difference between the two is the routing — Bromox, Jul 04 '18 at 01:02
I have also tried calling this action from other components and it worked, it simply won't work in this one component.... I am completely stumped — Bromox, Jul 04 '18 at 01:30

score 0 · Answer 1 · answered Jul 04 '18 at 04:57

0

I can't leave a comment, but shouldn't you add .css extension when importing styles?

import "../Login/login";

answered Jul 04 '18 at 04:57

Ehsan Korhani

75
5

score 0 · Accepted Answer · answered Jul 06 '18 at 12:29

The issue was due to how I was loading this component into my container. I am nut sure of the exact reasoning but I was importing my component into the container using a named import import {Login} from ".../path", whereas it should have been import Login from ".../path".