redux-form（V7.4.2）筆記（一）

一、前言與說明

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

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

說實在的，在學習React技術棧過程中，看到每一個其組成子庫的LOGO標記我每每深感熱血沸騰又壓力滿滿——Facebook作為業界大牛，其引領下的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庫的一個基本思想是把組成網頁界面的所有組件分解為兩種類型：普通組件（也稱為描述組件）與容器組件。那么，redux-form，作為form——組件的一種，應當劃分為容器組件。當然，根據react-redux庫官方建議，復雜的容器組件還應當根據實際情況作可能的進一步拆分（再分解為更小粒度的組件與容器組件）。

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

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

三、redux-form數據流示意

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

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

1. 用戶點擊這個 <input/> 組件,
2. “Focus action” 被觸發,
3. formReducer 更新了對應的狀態,
4. 這個狀態被傳回 <input/> 組件中。

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

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

四、redux-form總體使用流程

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

步驟 1/3: 創建Form reducer

store需要知道如何處理來自于form組件的action。因此，需要在store中注冊 formReducer（或者說把formReducer以參數方式傳遞給創建Store的函數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進行交互，需要使用高階函數 reduxForm() 來包裹表單組件。正如下面的代碼所展示的，它以props的方式提供了表單內的state以及執行提交表單操作的函數。

下面代碼來自于SimpleForm.js。當然，官方網站處提供了更簡單的實例代碼（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>
          <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>
        <label>Email</label>
        <div>
          <Field
            name="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>
          <Field
            name="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 form
    form: 'simple'
})(SimpleForm)

export default SimpleForm

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

<Field name="inputName" component="input" type="text" />

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

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

從現在開始，表單上的操作數據已經可以填充至Store，并可以執行提交表單操作了。

步驟 3/3: 提交表單數據

提交的數據以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 }}>
      <h3>最簡單類型表單示例</h3>
      <SimpleForm onSubmit={showResults} />

        <hr/>
      <Values form="simple" />
    </div>
  </Provider>,
  rootEl
);

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

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

export default (async function showResults(values) {
  await sleep(500); // simulate server latency
  window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`);
});

五、小結

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