您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本系列文章学习和研究redux-form的主要参考资源，特别是代码部分，主要在于其官方网站提供的一切资源及工程源码剖析。
在使用 redux-form 之前，需要用户具备以下基础：
redux-form基于React-Redux状态管理理念，而form本身作为一种「特殊」的容器组件，要实现这种组件与数据中心（即Redux的store）的交互，关键在于把握 redux-form 的三个主要模块：
- formReducer reducer : 表单的各种操作以 Redux action 的方式，通过此 reducer 来促成 Redux store 数据的变化。
- reduxForm() API ：此高阶组件用以整合 Redux action 绑定的用户交互与您的组件，并返回一个新的组件供以使用。
- <Field/> API： 用此代替您原生态的HTML5 <input/> 组件，可以与redux-form的逻辑相连接。
补充解释如下。
有关代码如下（store.js）：
import { reducer as reduxFormReducer } from 'redux-form';
const rootReducer = combineReducers({
//other custom reducers
form: reduxFormReducer, // mounted under "form"
});combineReducers工具函数组件各个子reducer，最后形成一个大型reducer，称为rootReducer。然后，以此rootReducer为参数传递给createStore创建Redux的store对象。
Reducer的作用是：负责根据子组件发出的Action和原有State生成新的State，即：
| Reducer的作用 |
|---|
| oldState+Action=>newState |
为了全面理解上面的代码，让我们再回顾一下Redux编程中Reducer拆分思想。Redux编程思想中建议把较大型的超过20行以上代码的reducer函数拆成了若干个小型的recducer函数，每一个负责生成对应的一部分state。而且，这种拆分与 React 应用的结构相吻合：一个 React 根组件由很多子组件构成。这就是说，子组件与子 Reducer 完全可以一一对应。
Redux 提供的combineReducers方法，正是用于 Reducer 的拆分。你只要定义各个子 Reducer 函数，然后用这个方法，即可将它们合并成一个大的 Reducer。
典型情况下，上述combineReducers方法用场是：
生成rootReducer的模块中。因为往往随后使用rootReducer作为参数并通过调用createStore方法生成整个系统唯一的store，所以，combineReducers方法主要store.js模块中。
关于combineReducers方法还有一个重要细节，请注意如下代码：
const rootReducer = combineReducers({
chatLogReducer,
statusMessageReducer,
userNameReducer,
form: reduxFormReducer
});这种写法有一个前提： State 的属性名必须与各个子 Reducer 同名；否则，就要采用下面的写法。
const rootReducer = combineReducers({
chatLog：chatLogReducer,
statusMessage：statusMessageReducer,
userName：userNameReducer,
form: reduxFormReducer
});
因此，该函数根据 State 的 不同key 去执行相应的子 Reducer，并将返回结果合并成一个大的 State 对象。注意：最后一个form键名是不能更改的，这是redux-form系统规定的。
将来使用上面代码的结果的方法是：
state.chatLog、state.statusMessage......
当然，由于一个典型的reducer是要返回一个新的状态——一般使用对象方式表示；所以，最终你会见到代码中出现类似于下面的引用形式：
state.chatLog.obj1.p1
这一点在redux-form官方网站提供的实例InitializeFromStateForm中文件InitializeFromStateForm.js中即有如下使用方式：
InitializeFromStateForm = connect(
state => ({
initialValues: state.accountReducer.data,
}),
{ load: loadAccount },
)(InitializeFromStateForm);
上面代码行出现在示例表单定义模块的代码中，这里通过connect方法调用进一步包装表单组件，实现把store中state有关数据（state.accountReducer.data）映射到表单组件的属性上。
啰嗦上面这一些，就是为了强调一个简短的combineReducers调用意义重大，正是这一调用最终把store数据（代码中典型称为state）与组件props关联到一起。
API部分的描述是：reduxForm(config:Object)
这里，参数config是一个对象类型。此对象规定了系统内置的许多key，分别实现不同的功能。此高阶组件方法用以整合 Redux action绑定的用户交互与您的组件，并返回一个新的组件供以使用。
上面示例中的代码用法如下：
InitializeFromStateForm = reduxForm({
form: 'initializeFromState', // a unique identifier for this form
})(InitializeFromStateForm);
InitializeFromStateForm = connect(
state => ({
initialValues: state.accountReducer.data, // pull initial values from account reducer
}),
{ load: loadAccount }, // bind account loading action creator
)(InitializeFromStateForm);
上面reduxForm方法调用至少有两层含义：
（1）此方法进一步封装上面定义的表单组件，从而实现组成表单的UI组件的属性（props）（包括表单具体定义中的各个内置属性与接下来通过connect创建的少数定制属性，例如load）与store中的数据（即state，这个state中的对应形式可能是对象也可能是函数）关联到一起。
（2）此方法返回一个新的表单组件，提供给index.js中ReactDOM.render方法最终渲染网页中的表单使用，有关代码如下：
ReactDOM.render(
<Provider store={store}>
<div style={{ padding: 15 }}>
<h3>Initialize From State</h3>
<InitializeFromStateForm onSubmit={showResults} />
<Values form="initializeFromState" />
</div>
</Provider>,
rootEl
);所有需要与 store 数据连接的表单组件，都可以用 <Field/>。在正确使用它之前，需要清楚三条基本概念:
使用方法列举如下：
可以是任何自定义的 class 组件（如下面的MyCustomInput组件），或者其他第三方库。
/```
/ MyCustomInput.js
import React, { Component } from 'react'
class MyCustomInput extends Component {
render() {
const { input: { value, onChange } } = this.props
return (
<div>
<span>The current value is {value}.</span>
<button type="button" onClick={() => onChange(value + 1)}>Inc</button>
<button type="button" onClick={() => onChange(value - 1)}>Dec</button>
</div>
)
}
}
然后这样使用:
import MyCustomInput from './MyCustomInput'
//...
<Field name="myField" component={MyCustomInput}/>
### 2.无状态组件
这是一个非常灵活的使用 <Field/> 的方法。你必须在你的 render() 方法外定义它，否则它每次渲染都会被重建，并且由于组件的 prop 会变，就会强制 <Field/> 进行渲染。如果你在 render() 内部定义无状态组件，不但会拖慢你的程序的运行，而且组件的input每次都会在组件重新渲染的时候失去焦点。
//在方法 render() 外定义
const renderField = (field) => (
<div className="input-row">
<input {...field.input} type="text"/>
{field.meta.touched && field.meta.error &&
<span className="error">{field.meta.error}</span>}
</div>
)
//在render()方法内定义
<Field name="myField" component={renderField}/>
### 3.最简单且最常用的形式： input, select, or textarea
比如创建一个文字输入框组件
<Field component="input" type="text"/>
# 参考
（1）https://github.com/tedyuen/react-redux-form-v6-example#field-value-lifecycle
（2）http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html
（3）https://redux-form.com/7.4.2/docs/gettingstarted.md/免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。