准則
先說一下redux的使用場景，因為如果沒有redux，那更不會有redux-form。
redux基於Flux架構思想，是一個狀態管理框架，其目標是解決單頁面應用中復雜的狀態管理問題。
日常前端開發中，如果只是做一個簡單的運營活動頁面，甚至是一些路由稍微復雜一些的SPA項目，都可能用不到redux；只有在頁面存在多種數據來源，交互非常復雜的項目中，才有必要引入redux。
redux的作者Dan Abramov指出：
“只有遇到 React 實在解決不了的問題，你才需要 redux 。”
前些日子開發的轉轉魔方系統，用於搭建轉轉日常的運營活動頁面，因組件較多，交互復雜，采用了React+redux架構。先上一張“高大上”的截圖（當然布局、配色可以忽略，因為沒有UI資源，是我自己瞎搞的）：
那么，為什么采用redux-form呢？ 先讓我們看一下兩個普通的表單：
想象一下，如果用state來保存要提交的數據，用onChange來獲取用戶輸入，然后改變state中相應數據薦，簡直是夢魘一般。
幸虧，我們有redux和redux-form，redux用來管理狀態，redux-form來負責表單數據部分。
本文不介紹redux，如果想了解關於redux的更多，可以移步http://www.redux.org.cn/ ，還可以參考阮一峰的教程：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html
好了，廢話說了一大堆了，現在讓我們進入正題：
redux-form主要做以下4件事：
-
一個 redux reducer，監聽redux-form派發出的actions，統一管理我們redux中的form state；
-
一個React組件裝飾器，包含我們用高階組件組裝的整個form，提供一個帶一些props的純函數；
-
一個Filed組件將用戶輸入與redux store相連接；
-
用單個的Action Creator將我們的form與應用掛勾在一起。
先來了解一下redux-form的生命周期：
基本用法
必須要做的第一步，是先把redux-form的reducer用combineReducer方法給到redux。不管我們的應用中有多少form組件，我們只需要執行一次這樣的操作：
請注意，傳遞給redux-form的默認key為form，雖然支持自定義key names，但一般情況下請勿修改這個名字。詳見http://redux-form.com/6.7.0/docs/api/ReduxForm.md/#-getformstate-function-optional-。
第二步，將普通表單組件用reduxForm()方法裝飾，如此一來我們的組件才會擁有form state和一些表單方法。
請注意：const { handleSubmit, pristine, reset, submitting } = props中的各項並``不是從它的父組件傳過遞，而是從redux-form傳遞過來`。
pristine、submitting分別可以標識表單的當前狀態。 pristine表示表單還沒有進行任何動作，如輸入、獲取、失去焦點等 submitting表示正在提交
我們也可以主動告訴redux-form我們希望管理哪些輸入：
初始化數據
在日常前端開發過程中，尤其是后台OA中，經常會遇到新增和編輯頁面，此時如果建兩個頁面（或者用兩個不同View的路由），無疑會增加日后維護成本（學習React之初踩過這個坑），所以初始化數據尤為重要。
redux-form提供initialValues，以供表單初紹化數據。
官網中的初始化數據來自reducer（Reducer設計優雅的基礎上，推薦此方法）：
當然我們的數據也可能來自props（理論上數據應該完全放到一個store中，但實際項目開發過程中卻未必——我們還是會用到setState，因為某個state可能只是特定組件的一個開關，沒有必要放到store中）。
轉轉魔方系統中的頁面配置初始數據就是來自props：
數據校驗
數據校驗是表單操作中必不可少的一部分，redux-form為我們提供了3種數據校驗方法：
-
同步驗證，包含Field-Level校驗；
-
提交數據合法性驗證（非數據格式，如用戶名+密碼是否匹配等）；
-
異步驗證（Async Validate）
同步驗證
同步驗證有兩種方式。
-
通過一個自定義的驗證函數，這個函數默認會傳入攜帶表單字段值組成的一個object，返回對象為一個error組成的object對象。
-
在Field組件中傳入一個validate的props，把需要驗證的字段單獨或者以數據形式傳入。
以自定義驗證函數為例：
redux-form的驗證還支持warning，該警告不阻止表單提交，只給出提示
跟初始化數據一樣，驗證規則同樣需要通知redux-form：
提交數據合法性驗證（官方叫Submit Validation，根據Demo示例我給引申了一下）
用redux-form做服務端的推薦方式，是從onSumit方法中返回一個失敗的（rejected）promise。
在表單的提交函數中，redux-form也提供了兩種方式來校驗：
-
通過props中的onSumit函數傳遞給裝飾組件；
-
通過參數中的this.props.handleSubmit將form做為該函數的實參傳遞，可以在組件內部使用onClick={this.props.handleSubmit(mySubmit)}來代替提交按扭的默認提交事件。
在裝飾組件中這樣觸發:
異步驗證（Async Validation）
服務端異步驗證最好的方式是Submit Validation，有時候在我們輸入表單后，會即時的進行服務端驗證，比如注冊的時候驗證用戶名是否已存在。
asyncValidate通常也返回一個error或者resolve的reject對象。
以上便是這次的文章分享了，想對redux-form有更多的討論，可以給我們留言哦。想認識我們團隊這位小伙伴的，可以關注他的個人博 http://ushtml.com/
如果你喜歡我們的文章，關注我們的公眾號和我們互動吧。
