redux-form

[ZoeyYoung]

题外话

表单处理可以做得很简单，也可以做得很复杂；

简单的情况就是前端完全不做验证，把验证直接交给后台；其实目前都是通过ajax提交表单数据，并不存在页面刷新跳转，这样做除了可能会多发请求，其它并没有什么问题；

还是老观念，后台验证是必须的，前台验证是优化；必竟绕过前端验证去提交表单是比较容易的；

事实上，如果是正常的用户，通常不会有太多输入错误；而在前端添加验证代码会引入两个问题：1）多出许多验证逻辑代码，增加了复杂度；2）后端验证不全面，可能出现部分非前端提交的非法数据；

当然，如果能优化，又不会在业务中穿插许多验证逻辑代码，何乐尔不为呢

目前的做法

• 因为验证逻辑太乱，并没有完全正确可参考的需求文档，目前大部分是直接让后端来验证，出现问题只需要改后台；
• 将部分验证放在Action中做，在提交请求之前对表单数据进行验证，如果出现验证错误直接发送保存失败的Action（与请求返回错误结构一致），可以减少发送请求；这样的优点是业务组件中完全不需要参杂验证逻辑，组件只需关心简单的事情（输入&提交&显示错误消息）；缺点就是可能不符合部分需求场景（即时验证？不过也有WorkAround）；

function save(data) {
  // 在提交到后台之前进行表单验证
  if (validateFail) {
    return {
      type: ActionType.SAVE_FAIL,
      message,
    };
  }
  return dispatch => {
    CallApi(data).then(res => {
      if (res.status === 0) {
        dispatch({
          type: ActionType.SAVE_SUCCESS,
        });
      } else {
        dispatch({
          type: ActionType.SAVE_FAIL,
          message: res.message,
        });
      }
    });
  };
}

一直计划学习一下redux-form是怎么干这件事情的

https://github.com/erikras/redux-form