Validieren von Daten in Redux Store

Question

Ich versuche, Daten in einem Redux-Speicher für ein Formular zu überprüfen. Was ist der beste Weg, dies zu tun? Ich habe bisher ein paar Ideen hat:

1. A Validieren Aktion hat zu einer Art Hörer wie onBlur oder onChange gebunden sein. Sobald eine Formularkomponente unscharf ist, wird sie validiert. Die Validierungsfunktion kann dann jedoch 1) das Feld nur isoliert validieren oder 2) den vollständigen Formularzustand übergeben. Außerdem können/dürfen Aktions-Ersteller keinen Zugriff auf den neuen Status haben. Daher kann ich nur vorhandene Daten aktualisieren und ich kann die Validatoren nicht an etwas binden, das den Status aktualisiert. Ein Vorteil ist, dass ich eine asynchrone Validierung durchführen kann, indem ich einen Ersteller einer Validator-Aktion aufruft und ein Versprechen zurücksende (mithilfe von redux-promise/thunk).

2. Reducer validiert seine eigenen Daten. Teil 1 des Reduzierens würde die Daten aktualisieren, und Teil 2 würde den Status analysieren und die Fehler aktualisieren. Dies steht jedoch im Gegensatz zur Reducer-Reinheit, da das Aktualisieren eines Teils des Zustands dann einen anderen Teil des Zustands aktualisiert. Also muss ich sicherstellen, dass der Validator ausgeführt wird, nachdem der Status aktualisiert wurde.

3. Verwenden Sie Selektoren, um Fehler vom Status abzuleiten. Die Daten selbst ändern sich nicht, wenn ihre ungültigen/gültigen, nur Fehler angezeigt werden. Da Selektoren jedoch synchron sind, kann ich keine asynchrone Validierung durchführen.

Answer 1

können Sie alle Ihre Felder in Minderer mit Form wie:

"fields": { 
    "first_field": { 
     "error": null, //stores error that should be shown in form 
     "touched": false, //becomes true when onBlur event fired for this field, 
     "value": "", //input value 
    }, 
    ... 
} 

In diesem Fall können Sie die Validierung für die gesamte Form und validieren alle Felder ausführen können, die touched: true haben. Eigentlich sind alle Probleme, die Sie beschreiben, in redux-form gelöst und ich würde vorschlagen, dass Sie es verwenden.