浅谈redux-form在项目中的运用

准则

先说一下redux的使用场景，因为如果没有redux，那更不会有redux-form。

redux基于Flux架构思想，是一个状态管理框架，其目标是解决单页面应用中复杂的状态管理问题。

日常前端开发中，如果只是做一个简单的运营活动页面，甚至是一些路由稍微复杂一些的SPA项目，都可能用不到redux；只有在页面存在多种数据来源，交互非常复杂的项目中，才有必要引入redux。

 

redux的作者Dan Abramov指出：

“只有遇到 React 实在解决不了的问题，你才需要 redux 。”

前些日子开发的转转魔方系统，用于搭建转转日常的运营活动页面，因组件较多，交互复杂，采用了React+redux架构。先上一张“高大上”的截图（当然布局、配色可以忽略，因为没有UI资源，是我自己瞎搞的）：

那么，为什么采用redux-form呢？ 先让我们看一下两个普通的表单：

想象一下，如果用state来保存要提交的数据，用onChange来获取用户输入，然后改变state中相应数据荐，简直是梦魇一般。

幸亏，我们有redux和redux-form，redux用来管理状态，redux-form来负责表单数据部分。

本文不介绍redux，如果想了解关于redux的更多，可以移步http://www.redux.org.cn/ ，还可以参考阮一峰的教程：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

---

好了，废话说了一大堆了，现在让我们进入正题：

redux-form主要做以下4件事：

• 一个 redux reducer，监听redux-form派发出的actions，统一管理我们redux中的form state；

• 一个React组件装饰器，包含我们用高阶组件组装的整个form，提供一个带一些props的纯函数；

• 一个Filed组件将用户输入与redux store相连接；

• 用单个的Action Creator将我们的form与应用挂勾在一起。

 

先来了解一下redux-form的生命周期：

基本用法

必须要做的第一步，是先把redux-form的reducer用combineReducer方法给到redux。不管我们的应用中有多少form组件，我们只需要执行一次这样的操作：

请注意，传递给redux-form的默认key为form，虽然支持自定义key names，但一般情况下请勿修改这个名字。详见http://redux-form.com/6.7.0/docs/api/ReduxForm.md/#-getformstate-function-optional-。

第二步，将普通表单组件用reduxForm()方法装饰，如此一来我们的组件才会拥有form state和一些表单方法。

请注意：const { handleSubmit, pristine, reset, submitting } = props中的各项并``不是从它的父组件传过递，而是从redux-form传递过来`。

pristine、submitting分别可以标识表单的当前状态。 pristine表示表单还没有进行任何动作，如输入、获取、失去焦点等 submitting表示正在提交

我们也可以主动告诉redux-form我们希望管理哪些输入：

初始化数据

在日常前端开发过程中，尤其是后台OA中，经常会遇到新增和编辑页面，此时如果建两个页面（或者用两个不同View的路由），无疑会增加日后维护成本（学习React之初踩过这个坑），所以初始化数据尤为重要。

redux-form提供initialValues，以供表单初绍化数据。

官网中的初始化数据来自reducer（Reducer设计优雅的基础上，推荐此方法）：

当然我们的数据也可能来自props（理论上数据应该完全放到一个store中，但实际项目开发过程中却未必——我们还是会用到setState，因为某个state可能只是特定组件的一个开关，没有必要放到store中）。

转转魔方系统中的页面配置初始数据就是来自props：

数据校验

数据校验是表单操作中必不可少的一部分，redux-form为我们提供了3种数据校验方法：

1. 同步验证，包含Field-Level校验；

2. 提交数据合法性验证（非数据格式，如用户名+密码是否匹配等）；

3. 异步验证（Async Validate）

同步验证

同步验证有两种方式。

1. 通过一个自定义的验证函数，这个函数默认会传入携带表单字段值组成的一个object，返回对象为一个error组成的object对象。

2. 在Field组件中传入一个validate的props，把需要验证的字段单独或者以数据形式传入。

以自定义验证函数为例：

redux-form的验证还支持warning，该警告不阻止表单提交，只给出提示

跟初始化数据一样，验证规则同样需要通知redux-form：

提交数据合法性验证（官方叫Submit Validation，根据Demo示例我给引申了一下）

用redux-form做服务端的推荐方式，是从onSumit方法中返回一个失败的（rejected）promise。

在表单的提交函数中，redux-form也提供了两种方式来校验：

1. 通过props中的onSumit函数传递给装饰组件；

2. 通过参数中的this.props.handleSubmit将form做为该函数的实参传递，可以在组件内部使用onClick={this.props.handleSubmit(mySubmit)}来代替提交按扭的默认提交事件。

在装饰组件中这样触发:

异步验证（Async Validation）

服务端异步验证最好的方式是Submit Validation，有时候在我们输入表单后，会即时的进行服务端验证，比如注册的时候验证用户名是否已存在。

asyncValidate通常也返回一个error或者resolve的reject对象。

以上便是这次的文章分享了，想对redux-form有更多的讨论，可以给我们留言哦。想认识我们团队这位小伙伴的，可以关注他的个人博 http://ushtml.com/

如果你喜欢我们的文章，关注我们的公众号和我们互动吧。