本文共 4576 字，大约阅读时间需要 15 分钟。
redux是一种常用的与react框架搭配的一种数据流架构，而伴随着redux的出现，也出现了许多基于redux开源的第三方库，而redux-form就是其中之一的开源组件库，到今天我写下这篇笔记为止，在github上获得了5580颗star和654颗的fork数，今天就写一下我的redux-form的学习笔记吧
左转redux-form的api文档地址：http://redux-form.com/6.5.0/docs/api/
1第一件要做的事当然是安装依赖啦，通过终端进入项目所在目录，写入npm install redux-form安装依赖（前提：已成功配置node的运行环境，并且已安装好react和redux的相关依赖）
2在入口文件中写入以下代码：
import { createStore, combineReducers } from 'redux'import { reducer as formReducer } from 'redux-form'const reducers = { // ... your other reducers here ... form: formReducer // <---- Mounted at 'form'}const reducer = combineReducers(reducers)const store = createStore(reducer) 了解redux的同学应该很熟悉以上过程吧。没错，调用combineReducers可以将各个子 reducer的结果合并成一个 state 对象，然后state对象就变成了这样：
{ reducer1: ..., reducer2: ..., form:formReducer} 然后通过redux-form的接口，就可以实现在表单中输入的内容与state对象中form表单数据的同步了
我下面将写两个文件index.js和form.js代码见下图红色标题的下方
我的入口文件（src下的index.js）是这样的
// 导入react的相关模块import React from 'react';import ReactDOM from 'react-dom';// 导入redux的相关模块import { createStore, combineReducers } from 'redux'import { Provider } from 'react-redux'import { reducer as formReducer } from 'redux-form'// 导入我的form表单组件，位于同一目录下的form.js文件中import ContactForm from './form'const reducers = { form: formReducer }const reducer = combineReducers(reducers)const store = createStore(reducer)ReactDOM.render( , document.getElementById('root')); 稍微有些陌生的同学可左转redux的中文文档：http://www.redux.org.cn/docs/api/index.html
3第三步要做的是写一个form组件的js文件，在这个文件里：
- 在文件顶部通过
import { Field, reduxForm／／或者其他的组件 } from 'redux-form'; 引入必要的redux-form表单组件，比如Field,Fields,FormSection等
- 然后在文件最下方写入：
export default reduxForm({ form: 'simple' // 你的表单组件的特殊标记})(SimpleForm) // 这里的SimpleForm是你写的表单组件 然后你就可以写你的表单组件啦！
我的form.js如下：
import React from 'react'import { Field, reduxForm } from 'redux-form'const SimpleForm = (props) => { const { handleSubmit, pristine, reset, submitting } = props return ( )}export default reduxForm({ form: 'simple' })(SimpleForm) 运行结果：
点击submit输出：
这样一个最简单的redux-form就实现啦
（注：这篇博客参考自redux-form的官方英文文档）左转http://redux-form.com/6.5.0/examples/syncValidation/
在这篇博客里，我将用redux-form实现一个同步验证的表单，它将满足以下条件：
1有三个输入框：用户名输入框（username），邮箱输入框(email)和年龄输入框(age)
2如果点击输入框获取焦点后未输入内容，则在输入框失去焦点后发出错误（error）提示：XXX不能为空，且此时不能提交成功
3如果在输入框中输入内容不合法，比如用户名过长（length>5）发出错误提示：不能大于五个字，且此时不能提交成功
4如果在输入框中输入内容合法但需警告，则提示警告（warn）内容，此时虽然发出警告但仍能提交成功（请区分和2和3中的区别）
5在尚未输入内容时（pristine=true）或在提交过程中(submitting=true),禁止使用提交按钮。在点击清空按钮时，调用reset()方法清空所有输入框中的内容
首先附上form.js的代码：(这份展示一共两份代码：index.js和form.js,index.js的内容请看上一篇博客)
import React from 'react'import { Field, reduxForm } from 'redux-form'const validate = values => { const errors = {} if (!values.username) { errors.username = '用户名不能为空' } else if (values.username.length > 5) { errors.username = '不能大于五个字' } if (!values.email) { errors.email = '邮箱不能为空' } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) { errors.email = 'Invalid email address' } if (!values.age) { errors.age = '年龄不能为空' } else if (isNaN(Number(values.age))) { errors.age = '年龄必须是一个数字' } else if (Number(values.age) < 18) { errors.age = '对不起，你未满18岁' } return errors}const warn = values => { const warnings = {} if (values.age < 19) { warnings.age = '你年龄还有点小哦！' } return warnings}const renderField = ({ input, label, type, meta: { touched, error, warning } }) => ( {touched && ((error && {error}) || (warning && {warning}))} )const SyncValidationForm = (props) => { const { handleSubmit, pristine, reset, submitting } = props return ( )} export default reduxForm({ form: 'syncValidation', //你的redux-form的特殊标记，必填项 validate, // 上面定义的一个验证函数，使redux-form同步验证 warn // 上面定义的一个错误提示函数，使redux-form同步错误提示})(SyncValidationForm)//写入的redux-form组件 1什么是Field组件？
Field组件是redux-form组件库中的核心组件，它位于你的输入框（input）或输入框组件的外一层，将其包装起来从而使输入框能和redux的store直接连接起来。
它有两个最重要的属性：name属性和component属性，且这两个属性都是必填项
在上面的Field中name和component是必填的，而type属性和label属性是选填的，但选填的属性（如type和label）可通过props属性传入它的component中，比如以上的renderField中
2Field组件的name属性和component属性
- name属性是Filed组件的名称，也即Field下输入框的名称，它将成为存储form表单数据的values对象中的属性名：比如
转载地址：http://nseni.baihongyu.com/