React-Redux erhalten Requisiten oder Zustand in mapDispatchToProps

Question

bitte entschuldigen Sie potenziell Noob Frage, bin neu zu reagieren und reagieren-redux.

Ich habe eine Komponente, die derzeit einen Anmeldebildschirm darstellt. Eine seiner Requisiten ist "Login", ein Wörterbuch, das die E-Mail und das Passwort enthält. Nachdem die Komponente definieren, verwende ich die react-redux Bibliothek mit dem Speicher zu verbinden, etwa so:

const mapStateToProps = (state) => { 
    return { 
    rootNav: state.rootNav, 
    login: state.login, 
    }; 
}; 

const mapDispatchToProps = (dispatch, ownProps) => { 
    return { 
    onLoginClick:() => { 
     // TODO: actually get the login credentials from the view 
     dispatch(actions.submitLogin('testuser', 'testpw')); 
     dispatch(actions.changeRootNav(rootNavs.OVERVIEW_NAV)) 
    }, 
    onEmailUpdate: (email) => dispatch(actions.updateEmail(email)), 
    onPasswordUpdate: (password) => dispatch(actions.updatePassword(password)), 
    }; 
}; 

Offensichtlich in der Linie dispatch(actions.submitLogin('testuser', 'testpw')); ich die echte E-Mail und Passwort als Nutzlast mit der Aktion vorgelegt haben will. Aber ich verstehe nicht, wie ich von der Komponente darauf zugreifen sollte (dh ich kann nicht einfach this.props.login verwenden) oder ob/wie ich darauf vom Laden zugreifen sollte (wo würde ich den Laden passieren?)

Jede Klärung wäre sehr hilfreich!

Answer 1

Ich denke, das kann auf zwei Arten behandelt werden. mapDispatchToProps wird als zweites Argument an die react-redux connect-Funktion übergeben. Es gibt der verbundenen Komponente Zugriff auf bestimmte Aktions-Ersteller. In diesem Fall geben Sie die Aktion Ersteller onLoginClick, onEmailUpdate und onPAsswordUpdate.

Diese Funktionen sind nun in der Komponente über this.props.onLoginClick, this.props.onEmailUpdate usw. Eine einfache Lösung ist es, ein onClick Ereignis auf Ihrer Login-Button, oder onSubmit des Login-Formulars zu erstellen. Wenn Sie Ihre E-Mail und Passwort auf Ihrem redux Zustand zu aktualisieren und sie auf diese Komponente als Requisiten geben können Sie etwas tun:

In Ihrem Login-Klasse:

login() { 
    // get password and email from the props 
    const pw = this.props.password; 
    const email = this.props.email; 
    // submit login action with email and password 
    this.props.onLoginClick(email, password) 
} 

render() { 
    <form onSubmit={this.login.bind(this)}> 
     ... 
    </form> 
} 

Und Update mapDispatchToProps haben onLoginClick erwarte eine E-Mail und ein Passwort.

const mapDispatchToProps = (dispatch, ownProps) => { 
    return { 
    // update this action creator to take an email and password 
    onLoginClick: (email, password) => { 
     // TODO: actually get the login credentials from the view 
     dispatch(actions.submitLogin(email, password)); 
     dispatch(actions.changeRootNav(rootNavs.OVERVIEW_NAV)) 
    }, 
    onEmailUpdate: (email) => dispatch(actions.updateEmail(email)), 
    onPasswordUpdate: (password) => dispatch(actions.updatePassword(password)), 
}; 

Option 2

Ansonsten nach der reagieren-redux docs hier https://github.com/reactjs/react-redux/blob/master/docs/api.md Sie können auch das zweite Argument von mapDispatchToProps, ownProps verwenden.

So können Sie onLoginClick ändern wie folgt aussehen:

onLoginClick:() => { 
    const email = ownProps.email; 
    const password = ownProps.password; 

    dispatch(actions.submitLogin(email, password)); 
    dispatch(actions.changeRootNav(rootNavs.OVERVIEW_NAV)) 
} 

und auf dem Formular können Sie dies tun:

render() { 
    <form onSubmit={this.props.onLoginClick}> 
     ... 
    </form> 

}

oder wenn Sie es wollen nur sein auf einer Taste klicken ...

<button onClick={this.props.onLoginClick}>Login</button>