API 用 thunk 调用 react-redux 不工作

Question

当我提交电子邮件和密码时，它没有提供任何 error.But 因为我可以看到 loginUser(email,password) 函数中的 api 调用不是 working.but电子邮件已正确传递给函数。由于此功能不起作用，在提交值后，任何操作都不会调度。

这是我的 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
});

Answer 1

您需要分派操作才能使其正常工作，因为您要从 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);
}

Answer 2

试试这个

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

API 用 thunk 调用 react-redux 不工作

API call in react-redux with thunk not working

reactjs

react-redux

redux-actions