Aktion wird nicht ordnungsgemäß zurückgegeben, wenn die Komponente

Question

aus irgendeinem seltsamen Grund von Aktion Creator wird nicht ordnungsgemäß aufgerufen, wenn ich versuche, es von meiner Komponente auszulösen. Ich versuche, eine andere Funktion zurückzugeben, um zu meinen Reduzierern zu versenden, wie es der Standard mit redux-thunk ist. Ich kann jedoch nichts zurückgeben.

Die Komponente wird die Auslösung der Action-Funktion ‚signinUser‘, zeigt das console.log die E-Mail und Passwort-Werte (Zeile 7 der Aktionsdatei), und es springt dann den Return-Code (Linie 8 und vorwärts) in Aktion Datei.

Gibt es einen dummen Fehler, den ich mache? Alle meine anderen Komponenten funktionieren gut. Ich benutze reaktive Version. 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

Im Allgemeinen, wenn ich eine Trennung wie diese haben, und wenn ich sage, im Allgemeinen ich meine 200% der Zeit, es liegt daran, etwas ist falsch geschrieben oder fehlt. Ich bemerke, dass in Ihrer Aktion:

UTH_USER, ROOT_AUTH_URL 

in Gebrauch sind, aber

UNAUTH_USER, AUTH_ERROR 

nicht.

In der Situation von Unauth oder ein Fehler bin ich nicht sicher, dass dies überhaupt etwas tun würde. Überprüfen Sie den Netzwerk-Tab des Browsers devtools, um nach einem Fehler zu suchen, console.log überall sonst und überprüfen Sie diese Rechtschreibung.

Ich hoffe, Sie finden es!