when I submit an email and password it doesn't give any error.But as i can see the api call in loginUser(email,password) function is not working.but the email is correctly passed to the function. As this function is not working ,after submitting values any of the actions are not dispatching.
here is my index.js file
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) {
event.preventDefault();
let {email,password} =this.state;
loginUser(email,password);
}
render() {
let {isloginPending, isloginSuccess, isloginError} = this.props;
console.log(isloginPending);
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" />
{ isloginPending && <div>Please wait...</div> }
{ isloginSuccess && <div>Success.</div> }
{ isloginError && <div>{isloginError.message}</div> }
</form>
</div>
)
}
}
const mapDispatchToProps = (dispatch) => {
return {
// login: (email,password) => dispatch(loginUser(email,password))
};
}
const mapStateToProps = (state) =>{
return{
isloginPending: state.loginR.isloginPending,
isloginSuccess:state.loginR.isloginSuccess,
isloginError:state.loginR.isloginError
}
}
export default connect (mapStateToProps,mapDispatchToProps) (Login);
here is my action.js file
import * as actionType from './ActionType';
import fetch from 'isomorphic-fetch';
export function loginUser(email, password) {
console.log(email);
return dispatch => {
dispatch(loginBegin(true));
dispatch(login(false));
dispatch(loginError(null));
fetch("http://127.0.0.1:3001/user/login",{
method:'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
UserEmail:email,
Password:password,
})},{withCredentials:'include'})
.then (res=>res.json())
.then (res=>{
if(res.message==='Authorized'){
console.log("authorized");
dispatch(loginBegin(true));
dispatch(login(false));
/*
this.setState({
email : "",
password : ""
});
*/
localStorage.setItem('sessionType', res.result.sessionType);
localStorage.setItem("UserId" , res.result.UserId);
}
else{
console.log("error");
}
})
}
}
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
});
You need to dispatch the action in order to make it work since you are returning another function from within loginUser
You can do that with mapDispatchToProps
const mapDispatchToProps = (dispatch) => {
return {
login: (...args) => dispatch(loginUser(...args))
};
}
and in component
handleSubmit(event) {
event.preventDefault();
let {email,password} =this.state;
this.props.login(email,password);
}