0
私は、複雑な動的フォーム（たくさんのフィールド）を持つWebページを構築しています。可読性とメンテナンスのために、よりクリーンで短くしたいと思っています。 はこの場合、私は、例えば、このクリーナーフォームの検証コード[React Redux Thunk]？
のような複雑なフォームの検証を処理するためのより良い方法があるはずのように、ここでは、私のコードのいくつかであると感じた
// 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...自分の行動の作成者
// 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...
}
}あなたが見ることができるように、それは（多分？）かなり厄介だだけフォーム検証コンポーネントの、reducerはピュアとcontainer残るべき唯一のため、すべてのロジックを処理するためにaction creatorを残して、それはdoesnの、データを渡します。私の場合は良く見えません。
この種のケースに遭遇した場合、どうすればコードをきれいに保つことができますか？