Ошибка в возвращенном значении mapDispatchToProps

Question

Я получаю следующую ошибку для моего кода: Uncaught (в обещании) TypeError: _this2.props.login не является функцией в Login.js: 37 (для действительного пользователя я получаюсообщение "Авторизовано" без проблем). Когда я консоль регистрирую реквизиты, я получаю следующее: {{match: {…}, location: {…}, history: {…}, staticContext: undefined} **

import React, { Component } from 'react'
import fetch from 'isomorphic-fetch';
import {connect} from 'react-redux';
import {loginUser} from '../../actions/LoginActions'
export class Login extends Component {
   constructor(props) {
       super(props)

       this.state = {
        email:"",
        password:""  
       }
       this.handleSubmit=this.handleSubmit.bind(this); 
   }
   handleSubmit(event) {
    console.log(this.state.email);

    event.preventDefault();
    fetch("http://127.0.0.1:3001/user/login",{
      method:'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
    UserEmail:this.state.email,
    Password:this.state.password,

      })},{withCredentials:'include'})
      .then (res=>res.json())
      .then (res=>{
        if(res.message==='Authorized'){
        console.log("authorized");

        console.log(this.props);
        let { email, password } = this.state;
        **this.props.login(email,password);** //here I get the error
        this.setState({
            email : "",
            password : ""

          });
          localStorage.setItem('sessionType', res.result.sessionType);
          localStorage.setItem("UserId" , res.result.UserId);
      }
    else{
      console.log("error");
    }
    })

  }
    render() {
        return (
            <div>
                <form  onSubmit={this.handleSubmit}> 

<formgroup>
<input
type="email"
value={this.state.email}
onChange={(event)=>{this.setState({ email: event.target.value })}}
placeholder="Email"
id="email"
required
/>
</formgroup>
<formgroup>
<input
type="password"
value={this.state.password}
type="password"
onChange={(event)=>{this.setState({ password: event.target.value })}}
placeholder="Password "
id="password"
required
/>
</formgroup>

<input type="submit" value="Submit" />

</form> 
            </div>
        )
    }
}
const mapDispatchToProps = (dispatch) => {
    return({
        login: (email,password) => {dispatch(loginUser(email,password))}
         })
}
const mapStateToProps = (state) =>{
    return{}
}
export default connect (mapStateToProps,mapDispatchToProps) (Login)

Файл действия LoginUser:

import * as actionType from './ActionType';
import fetch from 'isomorphic-fetch';


export const loginBegin =(isloginPending) =>({
    type :actionType.LOGIN_BEGINS,
    payload:isloginPending
});

export const login =(isloginSuccess) =>({
    type :actionType.LOGIN_COMPLETE,
    payload:isloginSuccess
});

export const loginError =(isloginError) =>({
    type :actionType.LOGIN_ERROR,
    payload:isloginError
});



export function loginUser(email, password) {
    return dispatch => { 

      dispatch(loginBegin(true));
      dispatch(login(false));
      dispatch(loginError(null));

      callLoginApi(email, password, error => {
        dispatch(loginBegin(false));
        if (!error) {
          dispatch(login(true));

        } else {
          dispatch(loginError(error));
        }
      });
    }
  }

Answer 1

mapDispatchToProps должен быть просто объектом.

const mapDispatchToProps =  {
  login: loginUser
}

loginUser - это действие, которое вы импортируете в mapDispatchToProps, и вы воспринимаете это как this.props.login.

Answer 2

в mapDispatchToProps вы возвращаете один объект, вы пытались удалить скобки в функции?

const mapDispatchToProps = (dispatch) => {
    return {
        login: (email,password) => {dispatch(loginUser(email,password))}
         }
}