Redux verschachtelte Reduzierungen oder Normalzustand?

Question

Ich mache eine Formularkomponente mit React, und möchte die Form (en) und Feld (s) Zustand mit Redux speichern.

Also ich habe eine Form Reducer und eine FormField Reducer.

Ich folgte zuerst meinem Bauchgefühl und versuchte, den formField Reducer in die Form Reducer zu nisten. Dies bedeutete im Grunde, dass die formField-bezogenen Switch Cases sowohl im Form Reducer als auch im FormField Reducer enthalten waren.

Dies fühlte sich ein wenig chaotisch (Code wiederholen), also lese ich mehr in der Dokumentation und fand heraus, es wird empfohlen, den Zustand zu normalisieren. Also habe ich die verschachtelten FormFields weggenommen und auf die gleiche Ebene wie Formulare gestellt.

Dies machte den Reducer schön und sauber, aber jetzt das Abrufen der FormFields für eine bestimmte Form fühlt sich schrecklich an. Ich durchlaufe im Grunde jedes formFields und gebe nur diejenigen mit dem korrekten "formId" -Parameter zurück.

Die Redux-Dokumentation besagt, dass Sie den Status als normalisierte Datenbank behandeln sollten, aber hat er nicht vergessen, dass Sie nicht den Luxus haben, Ergebnisse abfragen zu können?

Habe ich hier etwas übersehen? Was ist der empfohlene Weg, um das zu lösen?

Answer 1

Es klingt wie Sie formFields Zustand als Array halten, sondern wollen, dass es als ein Objekt zum Abfragen mit formId ist der Schlüssel:

Dies ist die Minderer schön und sauber gemacht, aber jetzt die Formularfelder für eine bestimmte Abrufen Form fühlt sich schrecklich an. Ich durchlaufe im Grunde jedes formFields und gebe nur diejenigen mit dem korrekten "formId" -Parameter zurück.

Wenn Sie formFields Zustand zu ändern, ein Objekt zu sein, wird es viel einfacher sein, zu fragen: formFields[fieldId].

Wie in der anderen Antwort erwähnt, können Sie komponierbare "Selektoren" schreiben, die definieren, wie compute derived state. Dann wird der Code Ihrer Komponenten einfach sein, da alle schweren Aufgaben der Vorbereitung der Daten in kleinen und zusammensetzbaren Selektoren erledigt werden.

Sie können Reduzierer und Selektoren im shopping-cart Beispiel überprüfen, um eine bessere Vorstellung davon zu erhalten, wie der Status in idiomatischen Redux-Apps strukturiert ist. Beachten Sie, dass in diesem Beispiel Vanilla-Funktionen für Selektoren verwendet werden. Wir empfehlen jedoch die Verwendung von Neuauswahl für eine bessere Leistung.

Answer 2

Von was ich verstehe, ist Ihr Problem über die Abfrage abgeleiteter Daten. (, d. H. Felder, die zur Form X gehören).

Es gibt auch ein Dienstprogramm namens reselect, Ihr Anwendungsfall scheint zu passen, was es löst.

Sie müssten nur einen Selektor schreiben, der eine formId erwartet, und es würde ein Array von Formularfeldern zurückgeben.