码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-07-21 18:53:37      阅读:736      评论:0      收藏:0      [点我收藏+]

标签:adf   api   系统   usb   nvl   -o   asi   cab   block   

准则

先说一下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/

 

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

技术分享

 

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

标签:adf   api   系统   usb   nvl   -o   asi   cab   block   

原文地址:http://www.cnblogs.com/zhuanzhuanfe/p/7219077.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!