redux-form(V7.4.2)笔记( 五)核心模块回顾

前端之家收集整理的这篇文章主要介绍了redux-form(V7.4.2)笔记( 五)核心模块回顾前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本系列文章学习和研究redux-form的主要参考资源,特别是代码部分,主要在于其官方网站提供的一切资源及工程源码剖析。

基础

在使用 redux-form 之前,需要用户具备以下基础:


  • HTML5+CSS3
  • ES6+高阶组件函数式编程思想+React
  • Redux及React-redux

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的逻辑相连接。

补充解释如下。

(一)关于redux-form的reducer

有关代码如下(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关联到一起。

(二)关于reduxForm()方法

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 }}>
      <h2>Initialize From State</h2>
      <InitializeFromStateForm onSubmit={showResults} />
      <Values form="initializeFromState" />
    </div>
  </Provider>,rootEl
);

(三)关于<Field/>组件

所有需要与 store 数据连接的表单组件,都可以用 <Field/>。在正确使用它之前,需要清楚三条基本概念:


  • 必须包含 name 属性。可以是简单的字符串,如 userName、password,也可以是复杂的结构,如 contact.billing.address[2].phones[1].areaCode。
    * 必须包含 component 属性。可以是一个组件、无状态组件或者DOM所支持的默认的标签(input、textarea、select)。
  • 其他所有属性会通过prop传递到元素生成器中,如 className。

使用方法列举如下:

1.组件

可以是任何自定义的 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/
原文链接:https://www.f2er.com/react/301389.html

猜你在找的React相关文章