Je construis une page web qui a une forme dynamique complexe (beaucoup de champs), je veux garder les choses plus propres et plus courtes pour des raisons de lisibilité et de maintenance. Dans ce cas, je me sentais comme il devrait y avoir une meilleure façon de gérer la validation de forme complexe comme celui-ciCode de validation du formulaire de nettoyage [React Redux Thunk]?
Par exemple, voici quelques-uns de mes codes,
// reducer.js
// Let's create our initial employee state for our reducer
initialState = {
id: null,
name: '',
gender: '',
email: '',
role: '',
address: '',
phoneNumber: '',
experiences: [ // Array of experiences (Appendable)
{
id: null,
description: '',
error: null // Every item has it's own error value
}
],
errors: { // Error value for every single field
name: null,
gender: null,
email: null,
role: null,
address: null,
phoneNumber: null
}
}
// Lot of switch cases here...En ce qui concerne mon créateur d'action
// Actions.js
// I'll create bunch of actions that dispatch to reducer
const updateName = (value) => {
return {
type: UPDATE_NAME,
value: value
}
}
const updateGender = (value) => {
return {
type: UPDATE_GENDER,
value: value
}
}
// and so on.., even for the error value
const updateError = (bodyType, value) => {
return {
type: UPDATE_ERROR,
bodyType: bodyType,
value: value
}
}
// Then, I'll export methods for my container component
export const onUpdateName = (value) => {
return (dispatch) => {
const nameError = validateName(value); // custom validation method
dispatch(updateError(nameError));
dispatch(updateName(value));
}
}
// And more functions...
// And when the user hit SUBMIT
export const onSubmit =() => {
return (dispatch, getState) => {
const employeeInfo = getState().employeeReducer;
if (employeeInfo.errors.name || employee.errors.gender) {
// Checking every item in the object of errors, if error found, return
return;
}
// Passed the validation, do something else...
}
}Comme vous pouvez le voir, il est tout à fait désordre (peut-être?) Pour un composant de validation de formulaire uniquement, le reducer doit rester pur et ne laisse passer que container les données, laissant ainsi le action creator pour gérer toutes les logiques et doesn Je n'ai pas l'air bien dans mon cas.
Comment gardez-vous votre code propre si vous avez déjà rencontré ce genre de cas?