Push: Ctrl+Y

 技術で遊んで ときどき進む

React+Redux入門

React + Redux入門⑤ - 検索画面を作成3:非同期処理

2016/07/26

非同期処理を追加して、DBへのデータ追加・検索を実装していきます!

最終画面はこんな感じになります。

スクリーンショット 2016-07-04 15.06.18

まず最初にMongoDBの処理を実装し、その後Actionから処理を呼び出して利用する流れで進めていきます。

 

DB周りの実装

DBの接続は、npm start したときにmongooseというモジュール(node.js用のMongoDBアクセスライブラリ)を利用して実行します。
なので、とりあえずmongooseをインストールしましょう。

また、ディレクトリ・ファイルを以下のように作成します。

 

DB接続

コネクション部分はconnect.jsに実装したいので、そのあたりから始めます。

mongoose.connect()でUriを指定して接続しています。
エラーの場合や接続が切れた場合の処理はmongoose.connection.on(発生事項, 発生したときに実行するfunction)の形で指定できます。

./db/index.jsでconnect()を呼び出せるように指定します。

npm startの処理でDBに接続させるので、server.jsで上で追加したconnect()を実行します。

実行して、ターミナルに「===>  Succeeded in connecting to mongodb://localhost/ReactReduxSample」が表示されたら接続成功です。

 

DB処理

mongooseでのDB処理(検索・新規登録)を作成していきます。

modelsを作成

MongoDBでいうコレクション(RDBでいうテーブル)をmodelsディレクトリ以下に作成していきます。

タイトルと作成日時のみを持っている形です。
MongoDBではRDBで指定する型よりも柔軟な設定が可能(ObjectやArrayがよく使われる)なので、コレクションの設計に関してはMongoDBの薄い本を一読しておくと理解が進みます。

 

controllerを作成

controllerにはmodelsを使った実際のDB処理を書いていきます。
※今さらですが、このディレクトリの構成はこちらのboilerplateを参考にしています。

複数のcontrollerを持つことが多いので、index.jsを設定して呼び出しやすくします。

 

関連処理①body-parserの利用

ここで  ( req, res ) として簡単にリクエスト・レスポンスを取得していますが、これをするためにはbody-parserという新しいモジュールを利用する必要があります。
インストール・設定していきましょう。

 

関連処理②:MongoDB(mongoose)で前方一致

./server/db/utils/index.jsgetForwardMatchString という処理で前方一致を実現しています。
MongoDBでは検索条件に正規表現を用いるだけなので、以下のような実装になります。

titleの大文字小文字が違っていても同じものと判定します。

 

関連処理③:controllerを./server/db/index.jsに登録

./db以下の呼び出しはinde.jsから行いたいので、connectを登録した場所にcontrollerも登録します。

 

Controllerの呼び出し

上記で実装したcontrollerの検索・追加処理を呼び出せるようにします。

ExpressでPostを受付け

Expressを使ってPostを受け付けるので、server.jsに処理追加します。

これでPostで呼び出し=>controllermodelにアクセスしてDB処理・結果を返すという処理が完成しました。

ActionからPostを呼び出す

実際に呼び出すのはActionからで、前回仮置きしていたところになります。
非同期処理のモジュールはいくつかありますが、今回はredux-thunkaxiosというモジュールを利用していきます。

非同期処理(Ajax)の実装

redux-thunk

非同期処理を可能にするミドルウェアです。
まずミドルウェア登録します。

redux-thunkを登録することで、ひとつのActionで複数のdispatchができるようになります。これにより、

  • 処理前にdispatchしてLoadingダイアログを表示
  • 処理後にdispatchしてLoadingダイアログを非表示/結果を表示

という動作が可能です。実装していきましょう。

Reducerの処理が増えている(REQUEST_**とFAILED_**)ので追記します。
あと「同じものがなければ新規登録ボタンを出す」という動作も実装していなかったので、ついでに追記します。

axios

axiosは通信担当です。server部分に通信して先ほど作成したcontroller部分の処理を実行するために利用します。

 

これで完了です!
npm run build -> npm start で検索画面ができている・・はずです。

 

おしまい!

はい、目標の検索画面作成までおわりましたー!
いったんお疲れさまでした!!

全ソースはGitHubにあげてあります。
こちらからどうぞ

開発に便利なモジュール等々、React + Redux研究タイムは日々やっていきたいなと思います。
というわけで勝手に番外編、おそらくつづきます。
乞わないご期待ください(/@□@\)!

 

-React+Redux入門
-, , , ,

おすすめの記事

1
React + Redux入門① - Reduxの概念を理解

React+Reduxでサイトを作っているので、復習がてら「検索画面を作成する」 ...

2
React + Redux + D3.js アニメーション:ドラッグ&ドロップでキングスライムを作った

はい、今回は要素のドラッグ&ドロップを中心に作ってみました。 Mater ...