redux-form的學習筆記

redux是一種常用的與react框架搭配的一種數據流架構，而伴隨着redux的出現，也出現了許多基於redux開源的第三方庫，而redux-form就是其中之一的開源組件庫，到今天我寫下這篇筆記為止，在github上獲得了5580顆star和654顆的fork數，今天就寫一下我的redux-form的學習筆記吧

左轉redux-form的api文檔地址：http://redux-form.com/6.5.0/docs/api/

1第一件要做的事當然是安裝依賴啦，通過終端進入項目所在目錄，寫入npm install redux-form安裝依賴（前提：已成功配置node的運行環境，並且已安裝好react和redux的相關依賴）

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的同學應該很熟悉以上過程吧。沒錯，調用combineReducers可以將各個子 reducer的結果合並成一個 state 對象，然后state對象就變成了這樣：

{
  reducer1: ...,
  reducer2: ...,
  form:formReducer
}

然后通過redux-form的接口，就可以實現在表單中輸入的內容與state對象中form表單數據的同步了

我下面將寫兩個文件index.js和form.js代碼見下圖紅色標題的下方

我的入口文件（src下的index.js）是這樣的

// 導入react的相關模塊
import React from 'react';
import ReactDOM from 'react-dom';
// 導入redux的相關模塊
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import { reducer as formReducer } from 'redux-form'
// 導入我的form表單組件，位於同一目錄下的form.js文件中
import ContactForm from './form'

const reducers = {
  form: formReducer 
}
const reducer = combineReducers(reducers)
const store = createStore(reducer)
ReactDOM.render(
    <Provider store={store}>
       <ContactForm />
    </Provider>,
  document.getElementById('root')
);

稍微有些陌生的同學可左轉redux的中文文檔：http://www.redux.org.cn/docs/api/index.html

3第三步要做的是寫一個form組件的js文件，在這個文件里：

• 在文件頂部通過

import { Field, reduxForm／／或者其他的組件 } from 'redux-form';

        引入必要的redux-form表單組件，比如Field,Fields,FormSection等

• 然后在文件最下方寫入：

export default reduxForm({
  form: 'simple'  // 你的表單組件的特殊標記
})(SimpleForm) // 這里的SimpleForm是你寫的表單組件

然后你就可以寫你的表單組件啦！

我的form.js如下：

import React from 'react'
import { Field, reduxForm } from 'redux-form'

const SimpleForm = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit(values => console.log(values))}>
      <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>
        <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' 
})(SimpleForm)

運行結果：

點擊submit輸出：

這樣一個最簡單的redux-form就實現啦