redux-formのstoreにコンポーネント内でアクセスする

redux-formを使用しててコンポーネント内でredux-form内のstoreの値を得たい時に調べるのにちょっと時間が取られたのでその時のメモ。

したいこと

redux-formを使っている周辺のコンポーネント内で、formに入力されている内容を見たい。

redux-formを使う、入力されたデータは自分で定義した唯一のstoreとは別の場所に保存されるので、普通にstoreにアクセスする方法だけでは見ることができない。

解決策

以下のissueに解決策があった。

【参考】current values? · Issue #2253 · erikras/redux-form

コードは以下のようになる。

 

redux-formのstoreとconnectし、そこにmapStateToProps関数を挟むことで、いつものようにstateをpropsとしてアクセスすることができるようになる。

注意点

結論は前述したとおりだが、少しだけ注意点。
reduxに慣れてる人に取っては杞憂な内容。
上のコードをただコピペするだけでは動かないかもしれない。

というのも、そのreduxプロジェクトに依存する点があるからだ。

 

①に関しては、そのプロジェクトのstore内で以下のように登録していると思うので、そこの名前を指定する。

②に関しては、さっきのコードの下部で書いたプロジェクト内でユニークになるformの名前を指定する。