reactjsreact-reduxredux-actions

API call in react-redux with thunk not working


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

Solution

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