Redux-form handleSubmit: Wie Sie Zugang zu speichern Zustand?
In einer redux-form handleSubmit Funktion, die einen Ajax-Aufruf, einige Eigenschaften aus der Redux-Zustand erforderlich sind, die Ajax (z.B. Benutzer-ID).
Das wäre einfach genug, wenn ich wollte, um zu definieren handleSubmit in der Formular-Komponente: rufen Sie Einfach mapStateToProps zu übergeben, was ich brauche, und Lesen Sie es von this.props in meinem handleSubmit.
Allerdings, wie eine gut Reagieren-Redux-Entwickler Schreibe ich separate view-Komponenten und-Container, so meine Ansicht-Komponenten können einfach mit wenig oder gar kein Verhalten. Deshalb möchte ich definieren handleSubmit in meinem container.
Wieder, einfach - redux-Formular eingerichtet ist, das zu tun. Definieren Sie eine onSubmit im mapDispatchToProps, und das Formular ruft die Datei automatisch.
Außer, oh wait, in mapDispatchToProps es gibt keinen Weg, um Zugriff redux Zustand.
Okay, kein problem, ich werde einfach die Requisiten brauche ich in handleSubmit zusammen mit der form-Werte.
Hmm, warte, es ist unmöglich zu passieren, alle Daten in handleSubmit mit diesem Mechanismus! Erhalten Sie einen parameter values, und es gibt keine Möglichkeit zum hinzufügen weiterer parameter.
Dies lässt die folgenden unattraktiven alternativen (von denen ich überprüfen kann, dass 1 und 2 arbeiten):
1 Definieren ein Einreichen handler der form-Komponente, und von dort aus rufen Sie meine eigenen submit-handler-Funktion übergeben von mapDispatchToProps. Das ist okay, aber erfordert meiner Komponente zu wissen, einige Requisiten aus der redux Staat, der nicht erforderlich ist, um die form anzuzeigen. (Diese Frage ist nicht eindeutig zu redux-form.)
dumbSubmit(values)
{
const { mySubmitHandler, user} = this.props;
mySubmitHandler(values, user);
}
<form onSubmit={ handleSubmit(this.dumbSubmit.bind(this)) }>Oder, prägnanter, lässt sich dies alles kombiniert in ein-Pfeil-Funktion:
<form onSubmit={ handleSubmit((values)=>{mySubmitHandler(values, this.props.user);}Dann damit diese Prozedur völlig agnostisch, es könnte nur passieren das gesamte diese.Requisiten zurück zu den benutzerdefinierten handler:
<form onSubmit={ handleSubmit((values)=>{mySubmitHandler(values, this.props);}2 Definieren "onSubmit" in mergeProps statt mapDispatchToProps, so hat er Zugriff auf stateProps. Dan Abramov empfiehlt gegen die Verwendung von mergeProps (aus performance-Gründen), so scheint dies suboptimal.
function mergeProps(stateProps, dispatchProps, ownProps) {
const { user } = stateProps.authReducer;
const { dispatch } = dispatchProps;
return {
...ownProps,
...dispatchProps,
...stateProps,
onSubmit: (values) => {
const { name, description } = values;
const thing = new Thing(name, description, []);
dispatch(createNewThing(thing, user.id));
}
}3 Kopieren Sie den Zustand Eigenschaften in redux-Formularfelder, die nicht zugeordnet, um jede input-Steuerelemente im Formular-Komponente. Dies wird sicherstellen, dass Sie zugänglich sind, in values übergebenen parameter zurück handleSubmit. Dies scheint wie eine Art hack.
Es muss einen besseren Weg geben!
Gibt es eine bessere Möglichkeit?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Nach einiger Zeit verfeinern diese Frage, option #1 ist eigentlich ziemlich gut, in der letzten iteration (Pfeil Funktion übergibt alle Requisiten wieder auf die benutzerdefinierte Prozedur). Es ermöglicht die Komponente zu Staatenlosen und völlig ignorant gegenüber jedem Staat, der es nicht konsumieren. Also werde ich rufen, dass eine vernünftige Antwort. Ich würde lieben zu hören, was Ihr besser Lösungen!
Definieren einen submit-handler mit einem Pfeil-Funktion in der form-Komponente, und von dort rufen Sie meine eigenen submit-handler-Funktion übergeben von mapDispatchToProps.
Dann damit diese Prozedur völlig agnostisch, übergeben den gesamten diese.Requisiten zurück zu den benutzerdefinierten handler:
Wenn die Submit-Funktion benötigt lediglich die Werte und die Requisiten, die nicht von der form, dann können wir auch wieder nur jene Requisiten, die das Formular nicht verwenden. In einer stateless Komponente, könnte dies wie folgt Aussehen:
mySubmitHandlerin einem anderen unären Funktion dhfn (a) { fn(a, b) }, die ich denke, technisch passt die definition. einfach nur neugierigDer beste Weg, fand ich ziemlich ähnlich wie die erste Lösung, die Sie kam mit.
Sich die Tatsache zunutze, dass die
handleSubmitprop übergeben redux-form kann eine Funktion verwendet werden, wie dieonSubmitprop, und mit der partiellen Anwendung zu übergeben, alle weiteren Parameter müssen SieonSubmit.Aktion Autor:
Nehme an, dass die Komponente erhält eine
onUpdateUserEigenschaft, die gerade übergibt die Parameter direkt zu der Aktion creator. Und die Komponente wird auchuser, ein Objekt mit deridEigenschaft, die wir weitergeben wollen an die Aktion creator zusammen mit den Werten in den Feldern.Komponente
Kann diese einfach neu geschrieben werden für zustandslose funktionale Komponenten, kann für jede beliebige Menge von Parametern, so lange wie Sie legen Sie Sie auf die Links in der action-Schöpfer, und es braucht nicht jeder schweres heben, nur
bindWar ich in der Lage, dieses Problem zu lösen durch Bindung
this.Irgendwo in der render()
Die handleSumit
MapDispatchToProps für guten Entwicklern 🙂
mapDispatchToPropsohne dabei in der form-Komponente, weil die Daten, dass die form nicht braucht und kein Geschäft zu wissen. Ich kann nicht sagen, ohne zu sehen, Ihre Codes, aber es klingt wie Sie beschreiben, die übergabe von Daten in der form (vielleicht übermapStateToProps? Sie nicht sagen) und sich dann übergeben es wieder inhandleSubmit. Dabei ist bereits in der akzeptierten Antwort. Wenn Sie etwas anderes zu tun, könnten Sie schreiben Sie Ihren code, wenn Sie fügt hinzu, info, der bisher nicht abgedeckt ist.