從組件觸發時無法正確返回動作

Question

由於操作創建者的某些奇怪原因未能在我嘗試從組件觸發它時正確調用。我正在嘗試返回另一個函數來發送給我的reducer，就像redux-thunk的標準一樣。但是，我無法返回任何東西。

組件被觸發「signinUser」行動功能，執行console.log顯示電子郵件和密碼值（操作文件的第7行），然後將其跳過動作的返回碼（第8行和以後）文件。

我在做一個愚蠢的錯誤嗎？我所有其他的組件都能正常工作我正在使用反應版本。 15.1

ACTION

import axios from 'axios'; 
import {browserHistory} from 'react-router'; 
import {AUTH_USER, UNAUTH_USER, AUTH_ERROR, ROOT_AUTH_URL} from '../constants/auth.constants'; 

export function signinUser({email, password}) { 

    console.log('email and password in action', email, password); 

---- ^^^ THIS CONSOLE PART WORKS. 
**---- THE RETURN FUNCTION below is not working... BELOW CODE IS NOT RENDERING ANYTHING.**------- 

    return dispatch => { 
console.log('pass the return'); ------> does not work :-(
    // Submit email/password to the server 
axios.post(`${ROOT_AUTH_URL}signin`, {email, password}) 
.then(response => { 
    console.log('response', response); 
    // - Update state to indicate user is authenticated: flag will turn to "true" 
     dispatch({type: AUTH_USER}); 
     // - Save the JWT token in local storage 
     localStorage.setItem('token', response.data.token); 

     // - redirect to the route '/feature' 
     browserHistory.push('/'); 
    }) 
    .catch(() => { 
        // if request is bad... 
        // - Show an error to the user 
     dispatch(authError('Bad Login Info!')); 
    }); 
    } 
} 
**---- ABOVE RETURN STATEMENT DOES NOT WORK **----------------- 

COMPONENT

import React, {Component, PropTypes} from 'react'; 
import {reduxForm, Field} from 'redux-form'; 
import {signinUser} from '../../actions/auth.actions'; 

class Signin extends Component { 
    // used to take supplied inputs and check auth 
    handleFormSubmit({email, password}) { 
     // Need something to log user in 
    console.log('test', email, password); 

    signinUser({email, password}); 
    **^^^^^ THIS PART is TRIGERRING THE ACTION** 
    } 

    renderAlert() { 
    if (this.props.errorMessage) { 
     return (
     <div className="alert alert-danger"> 
      <strong>Oops!</strong> {this.props.errorMessage} 
     </div> 
     ); 
    } 
    } 

    render() { 
    // handleSubmit is a built in redux-form helper to bind ui to values 
    const {handleSubmit} = this.props; 

    return (
     <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}> 
     <fieldset className="form-group"> 
      <label>Email:</label> 
      <Field name="email" component="input" type="text" required className="form-control"/> 
     </fieldset> 
     <fieldset className="form-group"> 
      <label>Password:</label> 
      <Field name="password" component="input" type="password" required className="form-control"/> 
     </fieldset> 
     {this.renderAlert()} 
     <button action="submit" className="btn btn-primary">Sign in</button> 
     </form> 
    ); 
    } 
} 

Signin.propTypes = { 
    signinUser: PropTypes.func, 
    errorMessage: PropTypes.string, 
    handleSubmit: PropTypes.func 
}; 

function mapStateToProps(state) { 
    return {errorMessage: state.auth.error}; 
} 

export default reduxForm({ 
    form: 'signin' 
}, mapStateToProps, signinUser)(Signin); 

Answer 1

通常，當我有這樣的斷開，當我一般會說我的意思的時候200％，這是因爲有些拼寫錯誤或缺失。我注意到，在你的行動：

UTH_USER, ROOT_AUTH_URL 

都在使用，但

UNAUTH_USER, AUTH_ERROR 

都沒有。

在出現意外或錯誤的情況下，我不確定這會做任何事情。檢查瀏覽器devtools的網絡選項卡以查找錯誤，在其他地方使用console.log並檢查拼寫。

希望你能找到它！