redux-form的学习笔记

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就实现啦

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏西城知道

Windows上的程序员神器Cmder 装逼和提高工作效率两不误

在Windows系统上做开发,总是对其Terminal不满意。无论是CMD还是PowerShell,真是太丑了。现在安利大家一款神器,除了外观好看以外,功能也是...

1013
来自专栏Python小屋

Python开发环境Anaconda3使用指南(入门篇)

虽然说,我认为IDLE是世界上最美的Python开发环境,但是确实略显简陋,对Python内功(代码编写和调试)要求也高,并且每个扩展库都需要自己安装和配置,所...

3264
来自专栏WindCoder

2014-2015插件整理

主要作用:Protect your WordPress site by hiding vital areas of your site, protecting ...

432
来自专栏李蔚蓬的专栏

ROS安装全过程(十分壮观,是个大坑来的

运行了一次sudo apt-get install ros-kinetic-desktop,第二次运行:

794
来自专栏张戈的专栏

WordPress评论滑动/拉链解锁myQaptcha代码版及部署方法

虽然博客取消了文章页面评论,仅剩下留言板的评论,但张戈还是要尽力做到尽善尽美,将用户体验做到极致!在防止垃圾评论的同时,尽量让评论变得更加简单快捷。 于是就想到...

3539
来自专栏沈唁志

Windows上的程序员神器Cmder 装逼和提高工作效率两不误

1881
来自专栏一“技”之长

ReactNative开发环境的搭建与开发前准备

    在ReactNative中文网上有详细的开发文档与教程,首先,想要系统了解ReactNative的朋友可以在如下网站中获取详细信息:

702
来自专栏Google Dart

AngularDart4.0 指南 原

      本文档为Angular的高级部分,如果你刚接触Angular,请先学习Angular。

652
来自专栏张戈的专栏

WordPress评论滑动/拉链解锁myQaptcha修改为自动提交的方法

自从肉牛、钢材等垃圾评论泛滥,很多朋友都用上了各种评论验证方案,其中一个比较惹眼的就是张戈博客目前在用的 myQaptcha 滑动解锁。 ? 很久之前张戈博客已...

3275
来自专栏ASP.NET MVC5 后台权限管理系统

.Net 转战 Android 4.4 日常笔记(2)--HelloWorld入门程序

我不知道人们为什么那么喜欢用HelloWorld来做为自己的第一个程序入门,为什么不是hello **其他的东西或者hi。 一、打开ADT 的Eclipse开发...

1777

扫码关注云+社区