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(
<Provider store={store}>
<ContactForm />
</Provider>,
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 (
<form onSubmit={handleSubmit(values => console.log(values))}>
<div>
<label>First Name</label>
<div>
<Field name="firstName" component="input" type="text" placeholder="First Name"/>
</div>
</div>
<div>
<label>Last Name</label>
<div>
<Field name="lastName" component="input" type="text" placeholder="Last Name"/>
</div>
</div>
<div>
<button type="submit" disabled={pristine || submitting}>Submit</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
</div>
</form>
)
} export default reduxForm({
form: 'simple'
})(SimpleForm)

运行结果:

点击submit输出:

这样一个最简单的redux-form就实现啦

 

redux-form的学习笔记的更多相关文章

  1. redux源码学习笔记 - createStore

    本篇是学习redux源码的一些记录,学习的redux版本是^4.0.1. 在页面开发时,需要管理很多状态(state),比如服务器响应,缓存数据,UI状态等等···当页面的庞大时,状态就会变的混乱.r ...

  2. Redux源码学习笔记

    https://github.com/reduxjs/redux 版本 4.0.0 先了解一下redux是怎么用的,此处摘抄自阮一峰老师的<Redux 入门教程> // Web 应用是一个 ...

  3. redux源码学习笔记 - applyMiddleware

    在创建store时,createStore(reducer, preloadedState, enhancer),除了reducer函数,初始状态,还可以传入enhancer.这个enhancer在c ...

  4. redux源码学习笔记 - combineReducers

    上一篇有了解到,reducer函数的两个为:当前state和此次dispatch的action. state的结构是JavaScript对象,每个key都可以代表着不同意义的数据.比如说 { list ...

  5. 【原】redux异步操作学习笔记

    摘要: 发觉在学习react的生态链中,react+react-router+webpack+es6+fetch等等这些都基本搞懂的差不多了,可以应用到实战当中,唯独这个redux还不能,学习redu ...

  6. [原创]java WEB学习笔记62:Struts2学习之路--表单标签:form,表单标签的属性,textfield, password, hidden,submit ,textarea ,checkbox ,list, listKey 和 listValue 属性,select ,optiongroup ,checkboxlist

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  7. Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法

    Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...

  8. React+Redux学习笔记:React+Redux简易开发步骤

    前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...

  9. amazeui学习笔记--css(HTML元素3)--表单Form

    amazeui学习笔记--css(HTML元素3)--表单Form 一.总结 1.form样式使用:在容器上添加 .am-form class,容器里的子元素才会应用 Amaze UI 定义的样式. ...

  10. Django学习笔记(14)——AJAX与Form组件知识补充(局部钩子和全局钩子详解)

    我在之前做了一个关于AJAX和form组件的笔记,可以参考:Django学习笔记(8)——前后台数据交互实战(AJAX):Django学习笔记(6)——Form表单 我觉得自己在写Django笔记(8 ...

随机推荐

  1. 如何测试LBS功能

    在LBS功能的开发中,为了保证通用性,服务器存在的坐标是基于wgs84的,这个通常由GPS设备传过来,对于PC来说,如何获得这个值呢?可以利用Google Earth来获得,并修改显示的坐标系统,“工 ...

  2. Pomelo的Router

    在pomelo中,对服务器的扩充非常简单,只需要修改一下配置文件config/servers.json,多添几台服务器配置就行了,如果我们的connector和chat都具有多台服务器,因此需要考虑对 ...

  3. Oracle中 Instr 这个函数

    http://www.jb51.net/article/42369.htm sql :charindex('字符串',字段)>0 charindex('administrator',MUserI ...

  4. Js获取复选框checkbox的值

    var emps= $("input[name='emp']:checked"); var employee= ""; emps.each(function() ...

  5. java算法 蓝桥杯 乘法运算

    问题描述 编制一个乘法运算的程序. 从键盘读入2个100以内的正整数,进行乘法运算并以竖式输出. 输入格式 输入只有一行,是两个用空格隔开的数字,均在1~99之间(含1和99). 输出格式 输出为4行 ...

  6. CentOS 6一键系统优化 Shell 脚本

    CentOS 6一键系统优化 Shell 脚本 脚本的内容如下: #!/bin/bash#author suzezhi#this script is only for CentOS 6#check t ...

  7. 20个常用的Java程序块

    1.字符串有整型的相互转换 String a = String.valueOf(2);//integer to numeric string Int i = Integer.parseInt(a);/ ...

  8. C# 6 与 .NET Core 1.0 高级编程 - 38 章 实体框架核心(下)

    译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 38 章 实体框架核心(下)),不对的地方欢迎指出与交流. 章节出自<Professional C# 6 ...

  9. Java用自定义的类型作为HashMap的key

      需要重写hashCode()和equals()方法才可以实现自定义键在HashMap中的查找. public class PhoneNumber { private int prefix; //区 ...

  10. Unity编程标准导引-1.2官方资源介绍

    1.2.官方资源介绍 Unity官方提供了丰富的学习和参考资源,有以下类别: Unity手册以及API文档 Unity的官方教程 AssetStore 1.2.1 Unity手册以及API文档 前述文 ...