Вызов API в реагировать на редукцию с неработающим thunk - PullRequest
Новая
       39

Вызов API в реагировать на редукцию с неработающим thunk

0 голосов
/ 24 октября 2019

, когда я отправляю электронное письмо и пароль, это не выдает никакой ошибки. Но, как я вижу, функция API в loginUser (электронная почта, пароль) не работает. Но электронная почта правильно передается в функцию. Поскольку эта функция не работает, после отправки значений ни одно из действий не отправляется.

здесь находится мой файл index.js 

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

вот мой файл action.js 

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

Ответы [ 2 ]

1 голос
/ 24 октября 2019

Вам необходимо отправить действие, чтобы оно заработало, поскольку вы возвращаете другую функцию из loginUser

. Это можно сделать с помощью mapDispatchToProps

const mapDispatchToProps = (dispatch) => {
    return {
       login: (...args) => dispatch(loginUser(...args))
   };
}

ив компоненте 

handleSubmit(event) {

    event.preventDefault();
    let {email,password} =this.state;        
    this.props.login(email,password);
}
0 голосов
/ 24 октября 2019

Попробуйте это 

handleSubmit(event) {
    const{loginUser} = this.props;
    event.preventDefault();
    let {email,password} =this.state;        
    loginUser(email,password);
}

и в mapDispatchToProps 

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