Kann nicht Zustand aktualisiert siehe

Question

Ich habe die folgende Aktion:

export function loginUserRequest() { 
    console.log('ACTION CALLED'); 
    return { 
    type: LOGIN_USER_REQUEST, 
    }; 
} 

und das ist das Reduktions:

export default function loginReducer(state = initialState, action) { 
    switch (action.type) { 
    case LOGIN_USER_REQUEST: 
     console.log('REDUCER CALLED'); 
     return Object.assign({}, state, { 
     isAuthenticated: true, 
     isAuthenticating: true, 
     statusText: null, 
     }); 
    default: 
     return initialState; 
    } 
} 

Dann meine Komponente:

class Login extends React.Component { 

    goHome =() => { 
    browserHistory.push('/'); 
    } 

    handleSubmit = (values) => { 
    console.log(this.props.isAuthenticating); 
    this.props.actions.loginUserRequest(); 
    console.log(this.props.isAuthenticating); 
    } 

    render() { 
    return (
     <LoginForm onSubmit={this.handleSubmit} /> 
    ); 
    } 
} 

Login.propTypes = { 
    actions: PropTypes.objectOf(PropTypes.func).isRequired, 
    isAuthenticating: PropTypes.bool.isRequired, 
}; 

const mapStateToProps = state => ({ 
    token: state.login.token, 
    isAuthenticated: state.login.isAuthenticated, 
    isAuthenticating: state.login.isAuthenticating, 
}); 

const mapDispatchToProps = dispatch => ({ 
    actions: bindActionCreators(actionCreators, dispatch), 
}); 

export default connect(mapStateToProps, mapDispatchToProps)(Login); 

LoginForm ist ein redux-form Komponente.

die expeted ouput aus der handleSubmit Funktion ist also:

false 
ACTION CALLED 
REDUCER CALLED 
true 

aber es gibt mir:

false 
ACTION CALLED 
REDUCER CALLED 
false 

Aber im redux dev tool kann ich das diff in LOGIN_USER_REQUEST sehen:

Warum sehe ich es nicht innerhalb der handleSubmit Funktion? Ist es etwas mit redux-form Bibliothek verbunden?

Zusätzliche Informationen:

Added shouldComponentUpdate und logger

shouldComponentUpdate = (nextProps, nextState) => { 
    console.log('Should component update called'); 
    if (this.props.isAuthenticating !== nextProps.isAuthenticating) { 
     console.log('distntict'); 
     return true; 
    } 
    console.log('false'); 
    return false; 
    } 

Answer 1

Sie erhalten ein solches Ergebnis wegen asynchroner Natur von Javascript. Also in Ihrem Code

handleSubmit = (values) => { 
    console.log(this.props.isAuthenticating); 
    this.props.actions.loginUserRequest(); 
    console.log(this.props.isAuthenticating); 
    } 

Zuerst drucken Sie den Wert der Stütze, und dann wird die Aktion aufgerufen, aber bevor die Aktion eine Reaktion mit dem aktualisierten Zustand zurückkehrt, wird Ihre dritte Anweisung aufgerufen, den Wert zu protokollieren und seit Der Status ist noch nicht aktualisiert. Sie sehen das gleiche Ergebnis.

Ein Ansatz wird Callbacks haben, aber das scheint keine Voraussetzung für Ihren Fall zu sein. Wenn Ihr wollen den Zustand anmelden, dann können Sie dies in componentWillReceiveProps Funktion

wie

componentWillReceiveProps(nextProps) { 
    if(this.props.isAuthenicating != nextProps.isAuthenticating) { 
      console.log(nextProps.isAuthenticating); 
    } 
} 

Ich hoffe, es