Redux 與表單

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)進行大幅的修改

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容