Error in returned value of mapDispatchToProps - reactjs

Question

I'm getting the following error for my code:
Uncaught (in promise) TypeError: _this2.props.login is not a function
at Login.js:37 (for a valid user I get the message "Authorized" without any problem).
When I console log the props what I get is this**{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 Action file :
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

in mapDispatchToProps you return one object, have you tried removing the parentheses in the function?
const mapDispatchToProps = (dispatch) => {
return {
login: (email,password) => {dispatch(loginUser(email,password))}
}
}

Answer 2

mapDispatchToProps is supposed to be just an object.
const mapDispatchToProps = {
login: loginUser
}
loginUser is the action that you're importing to mapDispatchToProps and you're assinging that as this.props.login.