1、對于簡單的表單應(yīng)用
①使用redux-form-utils工具庫來減少重復(fù)冗余的代碼,它能利用高階組件的特性為表單的每個字段提供value和onChange等必須值,而無需你手動創(chuàng)建。
②redux-form-utils提供的createForm(config)工具函數(shù):傳入表單的配置,自動為被裝飾的組件添加表單相關(guān)的props,示例如下

③redux-form-utils提供的bindRedux(config)工具函數(shù):生成與Redux應(yīng)用相關(guān)的reducer、initialState和actionCreator等,示例如下:

2、對于復(fù)雜的表單應(yīng)用
①使用redux-form,它除了提供表單必須的字段外,還能實現(xiàn)表單同步驗證、異步驗證甚至嵌套表單等復(fù)雜功能。
②在使用和配置方面,redux-form與redux-form-utils沒有太多的差異,唯一不同的是redux-form需要在Redux應(yīng)用的state樹中掛載一個獨立的節(jié)點。具體示例如下:

3、使用高階reducer為現(xiàn)有模塊引入表單功能(即如何在最小改動的基礎(chǔ)上為一個完整的redux應(yīng)用添加表單相關(guān)的功能)
①需要引入一個高階reducer---modeled,用來裝飾我們的myReducer

②裝飾完成后,當你想要修改定義在這個reducer里的狀態(tài),則需要用到react-redux-form的actions.change方法

③以上可以看到,使用react-redux-form的高階reducer可以簡單快捷的為reducer代碼添加表單處理的能力,而無需對現(xiàn)有的代碼及結(jié)構(gòu)進行大幅的修改