浅谈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种数据校验方法:
同步验证,包含Field-Level校验;
提交数据合法性验证(非数据格式,如用户名+密码是否匹配等);
异步验证(Async Validate)
同步验证
同步验证有两种方式。
通过一个自定义的验证函数,这个函数默认会传入携带表单字段值组成的一个object,返回对象为一个error组成的object对象。
在Field组件中传入一个validate的props,把需要验证的字段单独或者以数据形式传入。
以自定义验证函数为例:
redux-form的验证还支持warning,该警告不阻止表单提交,只给出提示
跟初始化数据一样,验证规则同样需要通知redux-form:
提交数据合法性验证(官方叫Submit Validation,根据Demo示例我给引申了一下)
用redux-form做服务端的推荐方式,是从onSumit方法中返回一个失败的(rejected)promise。
在表单的提交函数中,redux-form也提供了两种方式来校验:
通过props中的onSumit函数传递给装饰组件;
通过参数中的this.props.handleSubmit将form做为该函数的实参传递,可以在组件内部使用onClick={this.props.handleSubmit(mySubmit)}来代替提交按扭的默认提交事件。
在装饰组件中这样触发:
异步验证(Async Validation)
服务端异步验证最好的方式是Submit Validation,有时候在我们输入表单后,会即时的进行服务端验证,比如注册的时候验证用户名是否已存在。
asyncValidate通常也返回一个error或者resolve的reject对象。
以上便是这次的文章分享了,想对redux-form有更多的讨论,可以给我们留言哦。想认识我们团队这位小伙伴的,可以关注他的个人博 http://ushtml.com/
如果你喜欢我们的文章,关注我们的公众号和我们互动吧。
浅谈redux-form在项目中的运用的更多相关文章
- 浅谈 Axios 在 Vue 项目中的使用
介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...
- 浅谈 OneAPM 在 express 项目中的实践
[编者按]OneAPM 运营团队,近日在 github 上发现了一篇文章,特别奉献给大家.本文作者王宇先生从2015年年初就开始使用我们的产品,也是OneAPM 的忠实用户. OneAPM 是一个优秀 ...
- 转:浅谈CSS在前端优化中一些值得注意的关键点
前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...
- 浅谈Python在信息学竞赛中的运用及Python的基本用法
浅谈Python在信息学竞赛中的运用及Python的基本用法 前言 众所周知,Python是一种非常实用的语言.但是由于其运算时的低效和解释型编译,在信息学竞赛中并不用于完成算法程序.但正如LRJ在& ...
- 【WebApi系列】浅谈HTTP在WebApi开发中的运用
WebApi系列文章 [01]浅谈HTTP在WebApi开发中的运用 [02]聊聊WebApi体系结构 [03]详解WebApi参数的传递 [04]详解WebApi测试和PostMan [05]浅谈W ...
- redux在react项目中的应用
今天想跟大家分享一下redux在react项目中的简单使用 1 1.redux使用相关的安装 yarn add redux yarn add react-redux(连接react和redux) 2. ...
- 浅谈箭头函数和setTimeout中的this
箭头函数会改变this的指向,这个大家看文档都看到过,可是有没有具体理解呢?我发现自己应该可能大概是......emmmm,然后我整理了一遍,加强一下概念吧顺带再讲一下setTimeout这个函数改写 ...
- 浅谈Mamcached集成web项目
1.资源文件配置 config.properties 添加 #memcached服务器地址 memchchedIP=192.168.1.8 2.编写工具类 MemUtils package cn.co ...
- 【知识必备】浅淡MVP在Android项目中的实战演习,让代码结构更简单~
一.写在前面 讲道理,这次是真的笔者很久都没有更新blog了,主要最近维护的框架问题也是层出不穷,而且对技术交流群的解答也让我身心疲惫,所以在这里跟关注我的人说声抱歉,没有定期给你们带来福利,那么这里 ...
- 浅谈产品模型(Profile)在程序设计中的作用
引言:物联网平台的一个重要功能就是资产管理,产品或者设备都可以看成是资产中组成部分,所以有时候说物联网平台可以进行产品管理和设备管理.通常应用物联网平台开发一套具有产品或者设备管理功能的系统的时候,必 ...
随机推荐
- Catalog Service - 解析微软微服务架构eShopOnContainers(三)
上一篇我们说了Identity Service,因为其基于IdentityServer4开发的,所以知识点不是很多,今天我们来看下Catalog Service,今后的讲解都会把不同的.重点的拿出来讲 ...
- Elasticsearch 与 Kafka 整合剖析
1.概述 目前,随着大数据的浪潮,Kafka 被越来越多的企业所认可,如今的Kafka已发展到0.10.x,其优秀的特性也带给我们解决实际业务的方案.对于数据分流来说,既可以分流到离线存储平台(HDF ...
- 50几个photoshop快捷键
一.常用的热键组合 1.图层混合模式快捷键:正常(Shift + Option + N),正片叠底(Shift + Option + M),滤色(Shift + Option + S),叠加(Shif ...
- Dojo初探之4:dojo的event(鼠标/键盘)事件绑定操作(基于dojo1.11.2版本)
前言: 上一章详解了dojo的dom/query操作,本章基于dom/query基础上进行事件绑定操作 dojo的事件 dojo的事件绑定操作分为鼠标和键盘两种进行详解 1.鼠标事件 我们沿用上一章中 ...
- Nginx实用教程(一):启动、停止、重载配置
Nginx是一个功能强大的web服务器和负载均衡软件,由俄罗斯人开发.Nginx包括一个master进程和数个worker进程,master进程用于读取.解析配置文件和管理worker进程,worke ...
- Blockly编程:用Scratch制作游戏愤怒的小牛(小鸟)
愤怒的小鸟曾经很热门,网上还说他是程序员最喜欢玩的游戏.最先我是WIKIOI的评测页面看到他的,后来在2014年全国信息学奥林匹克联赛第一天第三题飞扬的小鸟也看到了它.因此,突然想做一个类似愤怒的小鸟 ...
- 使用zabbix_agent监控第一台windows服务器
解压windows客户端压缩包 bin目录下会有win32和win64俩个文件夹,根据windows系统的版本自行进行选择,将客户端程序文件拷贝至C:\zabbix 将conf文件中的zabbix_a ...
- Api接口通用安全策略及实现-OSS.Core
这篇文章一直说写,迟迟没有动手,这两天看到一些应用接口数据被别人爬虫.短信接口被人高频率请求攻击等案列,感觉简单概述分享一下接口安全验证还是有必要的.毕竟当下基本都以客户端应用为主,如果前期疏忽,发布 ...
- solr的基本概念
一.solr的基本概念 大家可以把solr搜索引擎看成一个数据库,不过是基于内存的.它可以存储信息,并且根据你的查询条件返回你想要的信息. 1.collection和core的概念 collectio ...
- openssl req(生成证书请求和自建CA)
伪命令req大致有3个功能:生成证书请求文件.验证证书请求文件和创建根CA.由于openssl req命令选项较多,所以先各举几个例子,再集中给出openssl req的选项说明.若已熟悉openss ...