Redux Form v6を使う

Redux Formを使う方法です。

Redux Formとは、ReduxでFormを扱う際のバリデートなどフォーム関連の処理をいい感じにしてくれるライブラリです。

これを使う一番のメリットはやはりバリデートのようです。

現在のバージョン

http://redux-form.com/6.5.0/examples/

2017年3月8日 現在の最新バージョンは 6.5.0です。

バージョン５とバージョン６の差

バージョン５からバージョン６で結構変わった点もいくつかあるようで、ネット上で探すと出て来るサンプルコードもバージョン５系用に書かれているものも多いため、注意が必要です。

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

みたいになるためです。