Задний план

Я работаю над очень рутинным куском кода, я неоднократно создавал действия и редукторы во всем моем приложении / регистре. Теперь я настраиваю аутентификацию и загружаю два контейнера на основе маршрутов /& console.log("test").

вопрос

Я пытаюсь отправить действие и сделать простой . Я делал это много раз до этого, фактически, я буквально дублировал контейнер и менял имена имен отправленных действий. Один контейнер работает, а другой меня поражает:Uncaught TypeError: _this2.propsregisterHandler is not a function

.

Я смущен, почему он не показывает .между реквизитом и registerHandler

Вот соответствующий код:

Импорт контейнеров

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>

....

Код отклонения

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

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

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

Действие

import * as actionTypes from "./actiontypes";

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

редуктор

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

пересмотренный

Этот код здесь не работает, я всегда получаю сообщение об ошибке, однако, если я назову то же действие в своем компоненте входа, он будет работать.

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

логин Компонент

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