reduxFormでform処理を楽にする

React

今回のゴール

Image from Gyazo
とんぺい
とんぺい

師匠こんばんわ〜。

今日も休日の時間を利用して、プログラミングの勉強をしにきたブゥ!

師匠
師匠

とんぺいくんこんばんわ。

前回は、GoogleAPIを用いて、Gmailを利用したログイン機能を実装したね。今回はredux-devtools-extensionとreduxFormについて勉強を進めていくよ。

とんぺい
とんぺい

redux-devtools-extension ?

reduxForm ?

どっちも初めて聞いたブゥ…

師匠
師匠

まずはredux-devtools-extensionの説明をしよう。

redux-devtools-extensionというのは、Reduxアプリの開発ツールの1つで、アプリに組み込むことで、ブラウザからReduxの状態管理を確認できるようになるよ。上の画像が、実際にredux-devtools-extensionをアプリケーションに組み込んだときの様子だね。

とんぺい
とんぺい

おぉ!確かに画面の右側で、DispatchされたActionや、Redux内部のStateが確認できるようになってるブゥ!これは、Reduxを用いてアプリケーションを作成する時に便利だブゥ!

師匠
師匠

では次に、reduxFormの説明をしよう。

reduxFormはReduxでFormを扱う際に、最も使用されているライブラリーで、reduxFormを用いることで、Formの実装がとても簡単になるんだ。

とんぺい
とんぺい

具体的にどういったことが簡単になるんだブゥ?

師匠
師匠

reduxFormを用いることで、Form処理に関するメソッド(handleSubmitなど)が自動的に入力欄に付与されるよ。また、上の画像に示したようなバリデーションの処理も簡単に実装することができるんだ。

とんぺい
とんぺい

ほぉほぉ。こちらもなかなか便利そうだブゥ!

今日もしっかり勉強するブゥ〜!

ディレクトリ構成 & パッケージ

実装しよう!

redux-devtools-extensionの追加

師匠
師匠

ここはREADMEに書いてあるとおりの実装だね。

今回は、後々redux-thunkをミドルウェアとして追加するので、READMEの「1.2 Advanced store setup」の方法でredux-devtools-extensionをアプリケーションに組み込んだよ。

とんぺい
とんぺい

うん。無事にブラウザでredux-devtools-extensionが表示されたブゥ!

師匠
師匠

よし。では次はreduxFormの実装に移ろう。

reduxFormを実装する

師匠
師匠

このファイルでは、reducerredux-formからimportしているよ。

しかし、reducerという名前のままにしておくと、実装がややこしくなるので、formReducerと名前を変更してimportしているよ。

とんぺい
とんぺい

ほぅほぅ。reduxFormを使えばReducerに変更を加えるだけで、Storeでformの状態を管理することができるんだブゥね!

師匠
師匠

では次は、ItemCreateファイルで実際にreduxFormを使って、入力フォームを作成してみよう。

とんぺい
とんぺい

うわぁ!このファイルは、すごく変更箇所があるブゥ!

1つずつ、説明をお願いしますだブゥ!

師匠
師匠

そうだね。ではまずは、renderメソッドの中身から説明していこう。

render()の中では、redux-formからimportしたFieldコンポーネントを用いて、入力フォームを作成しているよ。フォームの識別をできるようnameプロパティに、それぞれ"title""descriptioin"の文字列を渡しているよ。

とんぺい
とんぺい

なるほどぉ。そして、componentプロパティには、実際にどのような入力フォームを表示させるかといった情報を渡しているブゥね!

師匠
師匠

そうだね。今回は同一ファイル内にrenderInput()を作成したが、このような共通で使えそうな入力フォームは、別ファイルに作成すると、ItemCreate以外のファイルでも使えるようになるから、今後リファクタリングを行っていこう。

とんぺい
とんぺい

了解だブゥ!

その続きとしては…、入力が終わってSubmitボタンが押されたら、formタグのonSubmitプロパティに渡されている{this.props.handleSubmit(this.onSubmit)}が実行されて、console画面に入力された値が表示されるってことだブゥね!

師匠
師匠

そうだね。そして、Storeとこのコンポーネントでデータの受け渡しをするためにconnect()()と似たような、reduxForm()()といった記述をして、このコンポーネントをexportしているよ。

とんぺい
とんぺい

ふんふん。だいぶreduxFormの実装方法がわかった気がするブゥ!

ところで、バリデーションはどうやって実装するんだブゥ?

師匠
師匠

バリデーションの実装はrender()の下にあるconst validate = ...の箇所で定義されているね。formValuetitledescriptionがそれぞれ空だった場合に、上の画像のようにsyncErrorsにバリデーションで定義したエラーが渡されるようにしているよ。

とんぺい
とんぺい

うん?でもこの時、画面上にバリデーションの表示はされていないよ。

これはどういうことだブゥ?

師匠
師匠

これは、コードの上部に記述してあるrenderError()に注目してみよう。ここでは引数として、formProps.metaerrortouchedを受け取っているね。touchedというのは、入力フォームをクリックしたらtrueに変わるといった性質があるよ。

とんぺい
とんぺい

ほぅほぅ。つまり条件分岐でtouchedを用いることで、今回のようにレンダリングされた直後にはバリデーションが表示されないけど、ユーザーがフォームに何かを入力しようとして途中でやめた場合や、何も入力しないでSubmitボタンを押した際に、バリデーションが表示されるということだブゥね!

師匠
師匠

そういうことだね。

今回でreduxFormの簡単な使い方を理解できたはずなので、次回は実際にSubmitボタンが押された際に、入力内容がデータベースに保存されるような処理を実装してみよう。

とんぺい
とんぺい

おぉ!それは楽しみだブゥ!

それじゃあ師匠、また来るね!

今日はありがとうございました!

師匠
師匠

はい。今日もお疲れさまでした。

気をつけて帰るんだよ。

では、また次回。

コメント

  1. […] 今日は、JSON Serverというものを用いて、前回作成したreduxFormから入力された内容を、簡易的なデータベース(DB)に保存できるようにするよ。 […]

タイトルとURLをコピーしました