In einem Redux-FormularhandleSubmit -Funktion, die einen Ajax-Aufruf ausführt. In Ajax werden einige Eigenschaften aus dem Redux-Status benötigt (z. B. Benutzer-ID).

Das wäre einfach genug, wenn ich @ definieren wollhandleSubmit in der Komponente des Formulars: Rufen Sie einfach @ amapStateToProps zu übergeben, was ich brauche, und lesen Sie es austhis.props in meinemhandleSubmit.

Aber wie ein guter React-Redux-Entwickler schreibe ichseparate Ansichtskomponenten und Container, meine Ansichtskomponenten können also einfach und ohne oder mit wenig Verhalten sein. Deshalb möchte ichdefine handleSubmit in meinem Container.

Again, simple - Redux-Form ist dafür eingerichtet. Definiere einonSubmit immapDispatchToProps, und das Formular wird es automatisch aufrufen.

Except, oh warte, inmapDispatchToProps Es gibt keine Möglichkeit, auf den Redux-Status zuzugreifen.

Okay, kein Problem, ich werde nur die Requisiten übergeben, die ich brauche inhandleSubmit zusammen mit den Formularwerten.

Hmm, warte, es ist unmöglich, Daten an @ weiterzuleithandleSubmit mit diesem Mechanismus! Sie erhalten einen Parameter,values, und es gibt keine Möglichkeit, einen weiteren Parameter hinzuzufügen.

Dies lässt die folgenden unattraktiven Alternativen (von denen ich überprüfen kann, dass 1 und 2 funktionieren):

1 Definieren Sie einen Submit-Handler in der Formularkomponente, und von dort aus meine eigene benutzerdefinierte Submit-Handler-Funktion aufrufen, die von mapDispatchToProps übergeben wurde. Dies ist in Ordnung, setzt jedoch voraus, dass meine Komponente einige Requisiten aus dem Redux-Status kennt, die zum Anzeigen des Formulars nicht erforderlich sind. (Dieses Problem tritt nicht nur bei Redux-Formularen auf.)

dumbSubmit(values)
{
  const { mySubmitHandler, user} = this.props;
  mySubmitHandler(values, user);
}

<form onSubmit={ handleSubmit(this.dumbSubmit.bind(this)) }>

Oder, genauer gesagt, alles kann zu einer Pfeilfunktion zusammengefasst werden:

<form onSubmit={ handleSubmit((values)=>{mySubmitHandler(values, this.props.user);}

Um diesen Handler vollständig agnostisch zu machen, könnte er einfach das gesamte this.props an den benutzerdefinierten Handler zurückgeben:

<form onSubmit={ handleSubmit((values)=>{mySubmitHandler(values, this.props);}

2 Define onSubmit in mergeProps anstelle von mapDispatchToProps, damit es Zugriff auf stateProps hat.Dan Abramov rät von der Verwendung von mergeProps ab (aus Leistungsgründen), das scheint also 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 Kopiere die Zustandseigenschaften in Redux-Formularfelder, die keinem Eingabesteuerelement in der Formularkomponente zugeordnet sind. Dadurch wird sichergestellt, dass sie im @ erreichbar sinvalues Parameter zurückgegeben anhandleSubmit. Das scheint eine Art Hack zu sein.

Es muss einen besseren Weg geben!

Gibt es einen besseren Weg?