Kommunikation zwischen zwei React-Formularkomponenten mit Redux
Angenommen, Sie haben ein Formular wie unten, um eine neue Person hinzuzufügen:
Wenn Sie in diesem Beispiel ein Land aus der Auswahlliste auswählen, wird das Element city select mit Optionen für das ausgewählte Land gefüllt. Diese Formularseite ( PersonCreationForm ) besteht aus folgenden Komponenten:
- CountrySelectionForm
- CitySelectionForm
Hier ist die Frage: Wie soll ich die Auswahl von CountrySelectionForm component auf CitySelectionForm component? Ich habe ein paar Optionen im Hinterkopf, aber ich bin mir nicht sicher, was die perverse Art wäre, damit in der Redux-Welt umzugehen:
- Innerhalb der
PersonCreationForm-Komponente, indem Sie einfach denonCountrySelected-Stützpunkt vonCountrySelectionFormanhängen und das Ergebnis über seineCitySelectionForm-Stütze ancountryübergeben. Es ist nicht nötig, Redux für diese Kommunikation zu verwenden. Wenn Sie jedoch die Propertycountryändern, wird eine Änderung inCitySelectionFormausgelöst, um Städte basierend auf dem ausgewählten Land von Redux store zu erhalten. - Bei der Länderauswahl löst
PersonCreationFormcomponent die Aktion aus, die angibt, welches Land ausgewählt wurde. Auf dieser Basis wirdPersonCreationFormbenachrichtigt und übergibt das Ergebnis anCitySelectionFormbiscountryprop. Dies löst eine Änderung inCitySelectionFormaus, um Städte basierend auf dem ausgewählten Land von Redux store zu erhalten. - Bei der Länderauswahl löst
PersonCreationFormcomponent die Aktion aus, die angibt, welches Land ausgewählt wurde. Auf dieser Basis wirdCitySelectionFormbenachrichtigt. Dies löst eine Änderung inCitySelectionFormaus, um Städte basierend auf dem ausgewählten Land von Redux store zu erhalten.
4 Antworten
Ich würde Ihnen wärmstens empfehlen, redux-form für solche Situationen zu verwenden. In Ihrem Fall wäre es etwa so:
%Vor%Damit dies funktioniert, sollten Sie die Props "value" und "onChange" in den Komponenten ContrySelectInput und CitySelectInput verarbeiten. Wie bei normalen Eingaben.
Redux-Form-Modul wird Ihr Leben mit den Formen erheblich vereinfachen. Sie können so etwas mit einem sauberen Redux tun (Option 1 in Ihrer Liste). Und es wird immer noch stimmen.
Es gibt einen möglichen Weg, um zu bestimmen, welche Option Sie verwenden können:
Wenn Sie KEINE Daten für die App freigeben möchten und Komponenten dasselbe Elternelement haben, dann , können Sie dies mit dem lokalen Status tun. Daher spart es Ihre Zeit, weil Sie keine Aktionen, Reducer-Codes usw. schreiben müssen und keine Abstraktionen benötigen.
Wenn Sie zum Teilen der Daten in der App benötigen, dann können Sie redux stuff
verwenden Ich musste etwas ähnliches mit react-redux und redux-form machen. Sie könnten so etwas tun:
AddUserForm.js:
%Vor%CountrySelect.js:
%Vor%CitySelect.js:
%Vor%actions.js:
Die Funktion updateCities setzt redux state.cities auf ein Array, das folgendermaßen aussieht:
Sie brauchen Redux für diesen Anwendungsfall nicht. Sie können die Komponente PersonCreationForm als Wrapper mit einem internen Status verwenden.
Die beiden Selects CountrySelectionForm und CitySelectionForm müssen von props einen dedizierten Handler erhalten, der setState() ausführt, wenn sie in Child-Komponenten des 'onSelect' -Ereignisses ausgelöst werden.
Die Komponente CitySelectionForm erhält props den Wert CountrySelectionForm dank des Status, der von der intelligenten Komponente PersonCreationForm verwaltet wird.
Tags und Links reactjs redux react-redux