Redux Formを使う方法です。
Redux Formとは、ReduxでFormを扱う際のバリデートなどフォーム関連の処理をいい感じにしてくれるライブラリです。
これを使う一番のメリットはやはりバリデートのようです。
現在のバージョン
http://redux-form.com/6.5.0/examples/
2017年3月8日 現在の最新バージョンは 6.5.0です。
バージョン5とバージョン6の差
バージョン5からバージョン6で結構変わった点もいくつかあるようで、ネット上で探すと出て来るサンプルコードもバージョン5系用に書かれているものも多いため、注意が必要です。
http://redux-form.com/6.5.0/docs/MigrationGuide.md/
に違いがまとめられています。
使い方
まずベースとして以下のようにしてフォームを定義します。
reducers/index.js
import { combineReducers } from 'redux'; import { reducer as form } from 'redux-form'; const rootReducer = combineReducers({ form }); export default rootReducer;
参考
http://redux-form.com/6.5.0/docs/GettingStarted.md/
このように設定をすることで、以下のようなstateにデータが入るようになります。
state.form.[form名]
実際にフォームを生成する際には以下のようにformの名前を定義しますが、これはシステム上ユニークにする必要があるのは
export default reduxForm({ form: 'hoge', })(MyForm);
state.form.hoge
みたいになるためです。