redux是一種常用的與react框架搭配的一種數(shù)據(jù)流架構(gòu),而伴隨著redux的出現(xiàn),也出現(xiàn)了許多基于redux開源的第三方庫,而redux-form就是其中之一的開源組件庫,到今天我寫下這篇筆記為止,在github上獲得了5580顆star和654顆的fork數(shù),今天就寫一下我的redux-form的學(xué)習(xí)筆記吧
左轉(zhuǎn)redux-form的api文檔地址:http://redux-form.com/6.5.0/docs/api/
1第一件要做的事當(dāng)然是安裝依賴?yán)?,通過終端進(jìn)入項目所在目錄,寫入npm install redux-form安裝依賴(前提:已成功配置node的運行環(huán)境,并且已安裝好react和redux的相關(guān)依賴)
2在入口文件中寫入以下代碼:
import { createStore, combineReducers } from 'redux'import { reducer as formReducer } from 'redux-form'const reducers = { // ... your other reducers here ... form: formReducer // <---- Mounted at 'form'} const reducer = combineReducers(reducers) const store = createStore(reducer)
了解redux的同學(xué)應(yīng)該很熟悉以上過程吧。沒錯,調(diào)用combineReducers可以將各個子 reducer的結(jié)果合并成一個 state 對象,然后state對象就變成了這樣:
{ reducer1: ..., reducer2: ..., form:formReducer }
然后通過redux-form的接口,就可以實現(xiàn)在表單中輸入的內(nèi)容與state對象中form表單數(shù)據(jù)的同步了
我下面將寫兩個文件index.js和for