Question

我正在构建一个具有复杂动态形式（很多字段）的网页，为了便于阅读和维护，我希望保持更清洁和更短的内容。在这种情况下，我觉得应该有更好的方法来处理像这样的复杂表单验证

例如，以下是我的一些代码，

＆＃13;

// 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...

＆＃13;

至于我的动作创作者

＆＃13;

// 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...
  }
}

＆＃13;

正如您所看到的，对于表单验证组件而言，它可能非常混乱（可能？），reducer应保持 Pure 和仅container传递数据，从而让action creator处理所有逻辑，在我的情况下它看起来并不好。

如果碰到这种情况，如何保持代码清洁？

Answer 1

Redux示例往往非常具体，以提供清晰度，但是没有理由不能使用更多的一般动作创建者。

例如，您可以只使用这样的一个，而不是为每个单值表单字段创建一个动作创建器：

const updateField = (field, value) => {
  return {
    type: UPDATE_FIELD,
    field: field,
    value: value
  }
}

以后您可以像这样调用动作创建者

dispatch(updateField('gender', 'male'))

（也不要忘记更新减速机）。

您可以为错误和添加/删除/清除多值表单字段创建类似的通用操作创建器。

执行此操作的一个缺点是您的操作日志不会具有可读性 - 尽管它通常不是问题。

清洁表格验证码[React Redux Thunk]？

1 个答案: