JSON Serverを用いて、簡易データベースを構築する

React

今回のゴール

Image from Gyazo
とんぺい
とんぺい

師匠、こんばんは。

Reactの勉強の続きをしに来たよ〜!

今日はどんなことを勉強するんだブゥ?

師匠
師匠

とんぺいくん、こんばんは。

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

とんぺい
とんぺい

おぉ!すごく面白そうな内容だブゥ!

今日もよろしくおねがいします!

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

師匠
師匠

今回は、JSON Serverを用いてDBを構築するために、pigcrudディレクトリの中に、新しくapiディレクトリを作成するよ。また作成したDBにHTTP通信を行って、データを送信するためにclient側にaxiosを追加しておこう。

とんぺい
とんぺい

了解だブゥ!

うん。apiディレクトリを作成して、axiosをclient側に追加するところまで、できたブゥ!

師匠
師匠

よし。それでは早速実装に入ろう。

まずはJSON Serverを用いたDBの構築から進めていくよ。

実装しよう!

JSON Serverを用いた簡易DBの構築

師匠
師匠

まずは、apiディレクトリにpackage,jsonを作成するよ。

terminal上でyarn initと入力し、success Saved package.jsonが出るまで、Enterを入力しよう。

とんぺい
とんぺい

yarn initと入力して、Enterを連打するっと…

うん。無事にpackage.jsonが作成されたブゥ!

師匠
師匠

では、引き続きterminal上でyarn add json-serverと入力して、apiディレクトリにJSON Serverを追加しよう。

とんぺい
とんぺい

terminal上でyarn add json-serverと入力する…

無事に追加されたブゥ!

師匠
師匠

では、apiディレクトリにdb.jsonファイルを作成して、package.jsonファイルを以下のように修正しよう。

とんぺい
とんぺい

作成が完了しました!

それぞれのファイルには、一体どういった意味があるんだブゥ?

師匠
師匠

db.jsonが、今回のデータ保存先になるよ。

keyを”items”、valueを空の配列にして、axiosのエンドポイントで”items”を指定すると、この配列にデータを保存したり、またこの配列からデータを取得できるようになるよ。

とんぺい
とんぺい

なるほど〜。

package.jsonには、どういった修正があったんだブゥ?

師匠
師匠

package.jsonには

"scripts": {
 "start": "json-server -p 3001 -w db.json"
},

を追加したよ。これは、3001のポートでdb.jsonを参照するという意味になるね。

とんぺい
とんぺい

ほぅほぅ。DBの構築はこれで完了だブゥか?

師匠
師匠

そうだね。

他にも保存したいデータがある場合には、db.jsonのkeyを増やすけど、基本はここで完了だね。

terminal上のpigcrud/apiでyarn startと入力しよう!

とんぺい
とんぺい

ブブゥ!

何やら顔文字が出てきたブゥ!

師匠
師匠

うん。うまくDBが立ち上がったみたいだね。

これでJSON Serverを用いたDBの構築は完了だよ。

とんぺい
とんぺい

思ったより簡単にできたブゥ!

HTTP通信を試してみたい場合に、手軽に使えそうだブゥ!

師匠
師匠

よし。では、clientディレクトリの方に戻って、フロントエンド側の実装を進めていこう。

APIの作成

師匠
師匠

ここでは今まで学習したとおりに、axiosでHTTP通信を行う際にエンドポイントの共通箇所をbaseURLに登録しているね。baseURLは、JSON Serverを立ち上げたterminalのHomeの下に書かれているURLにしよう。

とんぺい
とんぺい

terminal画面上の

$ json-server -p 3001 -w db.json

\{^_^}/ hi!

・・・

Home

http://localhost:3001

のところだブゥね!

Action creatorの作成

師匠
師匠

ここでは、Action creatorを作成する前にActionのtypeを定義するよ。

今回はcreate機能に関するAction creatorを作成したいので、CREATE_ITEMという変数に"CREATE_ITEM"という文字列を代入して、actionのtypeを定義するよ。

とんぺい
とんぺい

これは絶対ではないけどAction creatorを作成する上で必須事項ではないけれど、タイピングミスをなくすための大切な処理だブゥね!

師匠
師匠

ここでは、入力フォームでsubmitボタンが押された際に実行されるAction creatorを定義しているね。今回は、非同期通信を用いてDBにデータを保存するので、createItems()は上記のようなコードになっているよ。

とんぺい
とんぺい

Action creatorで非同期処理を実現するためには、redux-thunkが必要だったブゥね。redux-thunkを使う場合は、Action creatorから関数を返すことができたからこのようなコーディングができるんだブゥ!

師匠
師匠

そうだね。また今回は、db.json内にitemsというkeyで空の配列を指定したね。その空の配列に入力された値を保存するために"/items"というエンドポイントを指定してpostメソッドを実行しているんだ。

Redux thunkの導入

師匠
師匠

ここでは、先程とんぺいくんが言っていた「redux-thunk」をアプリケーションに組み込んでいるね。この処理を行うことで、Action creator内で非同期処理が可能になるよ。詳細は以前の講義を参照するように。

とんぺい
とんぺい

この部分はしっかり復習したからバッチリだブゥ!

connectを用いてAction creatorをcomponentへ渡す

師匠
師匠

それでは最後に、Redux側で作成したAction creatorをReact側で使えるようにするよ。connectとreduxFormを同時に使えるようにするために、以前までexportしていた箇所をformWrappedという変数に代入しconnect関数の引数に渡してあげるよ。

とんぺい
とんぺい

なるほど。そして、importしたAction creatorをonSubmit関数内で発火させて上げることで、今回のゴールのようにDBにデータを送信させることができるということだブゥ!

まとめ

師匠
師匠

本日は以下のことを勉強したね。

・JSON Serverを用いた簡易DBの構築

・axiosとredux-thunkを用いたpost処理

・入力された値をDBに保存するためのAction Creatorの作成方法

とんぺい
とんぺい

うん。今日もたくさん新しいことを学べて楽しかったブゥ。

また次回が楽しみだブゥ!

師匠
師匠

以降の講義では、DBからデータを取得するgetメソッド、DBの中のデータを編集するputメソッド、データを削除するdeleteメソッドの実装に進もう。では、また次回。

コメント

  1. […] 前回は、JSON Serverを使ってデータベースを構築し、ItemをDBに送信するpostメソッドを実装したね。 […]

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