一、前言與說明

本系列短文是我學習與使用Facebook倡領下的React技術棧的一道小小的痕跡記錄。需要說明的是，學習與使用redux-form庫的前提是：（1）具有使用React(https://reactjs.org/)開發(fā)的基本經(jīng)驗；（2）使用Redux（https://redux.js.org/）開發(fā)的基本經(jīng)驗。

redux-form庫的URL：https://redux-form.com/7.4.2/

說實在的，在學習React技術棧過程中，看到每一個其組成子庫的LOGO標記我每每深感熱血沸騰又壓力滿滿——Facebook作為業(yè)界大牛，其引領下的React技術棧正風糜全球；React框架的科學設計不由得你不對時下流行的各種跨平臺與前后端一體化方案作一番深度對比、思索與嘗試。好吧，先上一下redux-form庫的HOME頁LOGO截圖：

本文圍繞redux-form庫的第一個最基本的實例redux-form-simple-example（https://redux-form.com/7.4.2/examples/simple/）展開。

二、使用redux-form庫的前提

使用react-redux庫的一個基本思想是把組成網(wǎng)頁界面的所有組件分解為兩種類型：普通組件（也稱為描述組件）與容器組件。那么，redux-form，作為form——組件的一種，應當劃分為容器組件。當然，根據(jù)react-redux庫官方建議，復雜的容器組件還應當根據(jù)實際情況作可能的進一步拆分（再分解為更小粒度的組件與容器組件）。

但從全局觀察，要想能夠使用redux-form（或者從另外一種角度說，順利實現(xiàn)把redux-form這種表單容器組件關聯(lián)到Redux Store），需要重點掌握下面三個主要內(nèi)容（或者說子模塊）：

• formReducer reducer : 表單的各種操作將以 Redux Action 的方式，通過此Reducer 來最終促成Redux store 數(shù)據(jù)的變化。
• reduxForm()高階組件: 此高階組件用以整合 Redux Action 綁定的用戶交互與您的組件，并返回一個新的組件供以使用。
• <Field/> : 用來代替原生的HTML5 <input/> 組件，可以與redux-form的邏輯相連接。

三、redux-form數(shù)據(jù)流示意

使用redux-form的一個好處是，在大部分情況下我們不需要關心如何創(chuàng)建Action，一切都是由庫自動完成的。下圖展示了redux-form一個簡易但典型的數(shù)據(jù)流情況：

對上圖作隨心所欲的深度解析尚有一定難度。所以，我先翻譯一下官方網(wǎng)站上對于此圖的基本解釋，如下：
舉個簡單的例子，我們有一個被 reduxForm() 創(chuàng)建的表單組件，里面有一個用 <Field/> 創(chuàng)建的 <input/> 組件，數(shù)據(jù)流大概是這個樣子的:

用戶點擊這個 <input/> 組件,

“Focus action” 被觸發(fā),

formReducer 更新了對應的狀態(tài),

這個狀態(tài)被傳回 <input/> 組件中。

遵循與此類似的邏輯還有，諸如在這個 <input/> 中輸入文字、更改其狀態(tài)和提交表單，等等。

redux-form 還能基于上述流程處理許多事情，諸如：表單驗證與格式化，多類型屬性與Action的創(chuàng)建等。有關這些內(nèi)容的討論，我們將隨著本系列的展開而進行下去。

四、redux-form總體使用流程

下面給出的redux-form總體使用流程代碼來自于redux-form官方提供的第一個最基本的實例redux-form-simple-example。

步驟 1/3: 創(chuàng)建Form reducer

store需要知道如何處理來自于form組件的action。因此，需要在store中注冊 formReducer（或者說把formReducer以參數(shù)方式傳遞給創(chuàng)建Store的函數(shù)createStore），這個formReducer服務于整個app中定義的所有表單組件，因此只需要注冊一次。
下面代碼見于store.js中（稍加英文注釋）：

import { createStore, combineReducers } from 'redux'; import { reducer as reduxFormReducer } from 'redux-form';//The combineReducers helper function turns an object // whose values are different reducing functions into a // single reducing function you can pass to createStore //e.g. rootReducer = combineReducers({potato: potatoReducer, tomato: tomatoReducer})const reducer = combineReducers({form: reduxFormReducer, // mounted under "form" }); const store = (window.devToolsExtension? window.devToolsExtension()(createStore): createStore)(reducer);export default store;

值得特別注意的是，在reducer中合并的formReducer的key必須命名為”form”！

步驟 2/3: 編寫表單組件（包括使用<Field/>組件）

為了使表單組件可以與store進行交互，需要使用高階函數(shù) reduxForm() 來包裹表單組件。正如下面的代碼所展示的，它以props的方式提供了表單內(nèi)的state以及執(zhí)行提交表單操作的函數(shù)。

下面代碼來自于SimpleForm.js。當然，官方網(wǎng)站處提供了更簡單的實例代碼（https://redux-form.com/7.4.2/docs/gettingstarted.md/）。

import React from 'react'; import { Field, reduxForm } from 'redux-form';const SimpleForm = props => {const { handleSubmit, pristine, reset, submitting } = props;return (<form onSubmit={handleSubmit}><div><label>First Name</label><div><Fieldname="firstName"component="input"type="text"placeholder="First Name"/></div></div><div><label>Last Name</label><div><Fieldname="lastName"component="input"type="text"placeholder="Last Name"/></div></div><div><label>Email</label><div><Fieldname="email"component="input"type="email"placeholder="Email"/></div></div><div><label>Sex</label><div><label><Field name="sex" component="input" type="radio" value="male" />{' '}Male</label><label><Field name="sex" component="input" type="radio" value="female" />{' '}Female</label></div></div><div><label>Favorite Color</label><div><Field name="favoriteColor" component="select"><option /><option value="ff0000">Red</option><option value="00ff00">Green</option><option value="0000ff">Blue</option></Field></div></div><div><label htmlFor="employed">Employed</label><div><Fieldname="employed"id="employed"component="input"type="checkbox"/></div></div><div><label>Notes</label><div><Field name="notes" component="textarea" /></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', // a unique identifier for this form // })(SimpleForm); //或者使用如下表達方式： const SimpleForm = reduxForm({// a unique name for the formform: 'simple' })(SimpleForm)export default SimpleForm

【注意】<Field/> 組件可以連接所有input類型組件的數(shù)據(jù)到store中，基本用法如下:

&lt;Field name="inputName" component="input" type="text" /&gt;

它創(chuàng)建了一個text類型的<input/>組件，還提供了諸如 value、onChange、onBlur等屬性，用于跟蹤和維護此組件的各種狀態(tài)。

還要注意的是， <Field/> 組件很強大，除了基本的類型，還可以配置類或者無狀態(tài)組件，詳見后文內(nèi)容。

從現(xiàn)在開始，表單上的操作數(shù)據(jù)已經(jīng)可以填充至Store，并可以執(zhí)行提交表單操作了。

步驟 3/3: 提交表單數(shù)據(jù)

提交的數(shù)據(jù)以JSON對象的形式注入了此表單組件的 onSubmit 方法里了，請參考如下代碼（index.js）：

import React from "react"; import ReactDOM from "react-dom"; import { Provider } from "react-redux"; import { Values } from "redux-form-website-template"; import store from "./store"; import showResults from "./showResults"; import SimpleForm from "./SimpleForm";const rootEl = document.getElementById("root");ReactDOM.render(<Provider store={store}><div style={{ padding: 15 }}><h2>最簡單類型表單示例</h2><SimpleForm onSubmit={showResults} /><hr/><Values form="simple" /></div></Provider>,rootEl );

注意，為了簡單起見，官方提供的上述示例中使用ES6異步技術實現(xiàn)了提交服務的模擬，見下面的代碼（showResults.js）：

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));export default (async function showResults(values) {await sleep(500); // simulate server latencywindow.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`); });

五、小結(jié)

本文結(jié)合redux-form官方提供的第一個實例redux-form-simple-example分析了使用redux-form的主要技術與總體思路。在后續(xù)短文中，我將主要結(jié)合redux-form官方提供的由簡單到復雜的示例展示討論。說實在的，阮一峰老師在他的一篇文章中提醒的，React技術棧的選擇與學習絕不是一件容易的事情——此過程中，我深深感覺到這一點。因此，如果短文中有不當?shù)姆治?#xff0c;十分希望有致力到這項內(nèi)容的朋友批評糾正！

總結(jié)

以上是生活随笔為你收集整理的redux-form（V7.4.2）笔记（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。