redux-form的学习笔记

Posted 2020-09-04 外婆的

redux是一种常用的与react框架搭配的一种数据流架构，redux-form是一种基于redux的第三方表单组件库，我将展示如何实现一个最简单的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就实现啦