TIS ENGINEER NOTE

27才文系出身フリーランスエンジニアのブログ

プログラミング

React + Reduxでサーバー通信ってどこでやればいいの?

更新日:

React + Reduxはその柔軟性から、Googleで調べて出てくる情報の一貫性がなく、機能を実装するときの調査が結構大変。

今回はリアルタイムチャットツールを開発したときの経験を元にReact + Reduxでサーバー通信を行うときの書き方について紹介していきます。

ちなみに今回の例ではRuby on RailsでAPIを構築し、そちらへ通信を行うという構成です。

使用するライブラリなど

サーバー通信用のライブラリ

javascriptでサーバー通信をするときに用いられるものとしてはajaxがメジャーですが、Reactで開発している中でajaxのためだけにjQueryを用いるというのはちょっとナンセンスです。

そこで今回はaxiosというサーバー通信用のライブラリを使用します。

Reactでサーバー通信する際は他にもsugaragentfetchが用いられることがありますが、書き方のわかりやすさ、名前のかっこよさから今回axiosをチョイスしました。

ただどのライブラリを使用するにしてもサーバー通信処理を記述する箇所に変わりはありません。

非同期処理用のミドルウェア

React + Redux構成において、stateを書きかえる処理はreducerに記載するのが基本です。しかし、そのstateを書き換えるという処理の都合上、reducerで行われる処理は同期処理でなければならず、ここに非同期のサーバー通信処理を行うことはできません。

そこでactionとreducerの間でサーバー通信を行えるようにするためのミドルウェアであるredux-thunkを導入します。

このミドルウェアを導入することによって、action creater上で関数の呼び出しが可能となります。

サーバー通信をどのタイミングで実装するかという決まりが存在していないため、今回は最もメジャーな手法であるこのaction-reducer間における非同期通信を実装していきます。

サーバー通信を行う為の最低限の構成

ミドルウェアの適用

storeを生成する際に読み込ませることでミドルウェアを実装することができます。

ここでのポイントはファイル構成にかかわらず、createStoreにapplyMiddlewareを使用してredux-trunkをstoreに読み込ませるというところです。

アクション

非同期のサーバー通信を実現するために必要なアクションは最低限以下の2つです。

  • 通信開始を伝えるアクション
  • 通信成功時にデータ更新を行うアクション

あとは失敗時に呼び出すアクションがあると便利ではありますが、今回は割愛します。

GETでデータ取得

まずはGETでサーバーからデータを取得するサーバー通信

前述したように、通信開始時、完了時にそれぞれアクションを呼び出しています。

完了時に呼び出されているアクションにおいて、取得したデータをstoreに渡すといったイメージです。

POSTでデータ送信

POSTでサーバー上のデータを更新する場合も記述箇所、基本的な記述内容は変わりません。

データ送信後、サーバーデータを取得することで現在の画面も最新に更新されます。

Reducer

reducerについてはシンプルにサーバー通信用のフラグと取得した値を設定しておきます。

サーバー通信用メソッドの呼び出し

あとは実際にaxiosでサーバー通信を行っているメソッドを呼び出せばOKです。

GETの場合

データ取得の場合、初期表示についてはレンダリング後にfetchMessagesを呼び出せばstateが更新されます。

またデータ送信成功時にも同じ関数を呼び出しているため、データを追加したは自動的に追加された状態のデータが表示されます。

POSTの場合

フォームで入力した値をサーバーに送信する機能は以下の通りに作成したデータ送信用関数を呼び出せばOKです。

まとめ

以上がRedux + Reactでの非同期サーバー通信の実装方法です。

「動かねえぞ!」って言う場合はお問い合わせなどいただければ、できる限り対応いたします。

閲覧いただき、ありがとうございました。

よく読まれている記事

エンジニア独立

2018/8/22

【厳選】現役フリーエンジニアが勧めるフリーランスエージェント2選

こんにちは、フリーエンジニアのてぃすです。 エンジニア、特にプログラマーがフリーランスになろうとしたとき、人脈豊富なスーパーエンジニアでもない限り、最も現実的な選択肢がフリーランスエージェントを利用した働き方です。 とはいえエンジニアバブルの昨今、そういったエージェントサービスは数多存在しており、戦国時代状態です。 選択肢が多いということは嬉しいことであり、同時にどれを選べばいいかという悩みにもなります。 各サイトではメリットや自サービスの長所しか書かれていません。当然ですが。 そうなると選ぶ側としては迷 ...

続きを読む

エンジニア独立

2018/1/13

エンジニア派遣でキャリアを積んで高収入を目指す

エンジニアとして採用面談を受けたことのある人なら分かると思うのですが、面談の時に最も重要視されるポイントは業務経験です。 もちろん普段の個人学習や、技術への関心などでフォローできる面もありますが、一番見られるのはどんな技術を使って、どんな業務を行ってきたかという点なんですよね。 採用する側もプロダクトの正否を左右する立場として責任を負っているわけですから当然です。 そんな時、良質な職務経験をどのように積むことができるか、というのがポイントになってきます。 今回はキャリア構築のための、派遣エンジニアという選 ...

続きを読む

エンジニア独立

2018/9/16

レガシーな技術を扱っていたSES正社員がモダンな技術を扱うフリーエンジニアになるまでにやったこと

こんにちは。フリーエンジニアのてぃすです。 僕は独立する前、SESの正社員として非常に歴史の長いプロジェクトに常駐で参加していました。 Javaを使ったシステムなのですが、他のJavaエンジニアに聞いても「なにそれ」と言われてしまうような非常にマニアックなフレームワークを最新から数年遅れのバージョンで扱っていました。 自動テスト?クラウドサーバー?なにそれ?的な非常にレガシーかつ面白みのない状況に嫌気と不安を感じて独立を志したわけです。 で、この時のような僕と同じような状況で悩んでいる人ってのをエンジニア ...

続きを読む

エンジニア入門

2018/8/19

未経験からプログラミングを学ぶための方法を徹底比較

いまの時代、プログラマという仕事ほどインスタントに高収入を目指せる職業は存在しないと考えています。 未経験の言語での参加にも関わらず、最初から残業なしで手取り30万円を得られた経験を以って、そのことを強く実感しました。 で、最近はプログラマ・エンジニアのこういった稼げる側面に気づいて、プログラマになりたいと考える人多くなってきました。 が、実際にどのような手順を踏んでプログラミングを学習して、プログラマになればいいか分からない人も同様に多いようです。 勉強方法によっては遠回りになりかねない 働きながら勉強 ...

続きを読む

エンジニア独立

2018/1/28

手数料公開のエンジニア案件紹介サービス『Lancers Top』に登録してみた

日本最大のクラウドソーシングサービスであるランサーズを運営するランサーズ株式会社が今年の10月2日より開始したサービスであるLancers Top。 僕自身既に複数の案件紹介サービスに登録しているのですが、このLancers Topでは色々と面白そうな試みをしており、興味が湧いたため、登録して個人面談まで行ってきました。 今回は実際にLancers Topを利用してみての感想や他のフリーランスエージェントと比べたときの特色などについて紹介していこうと思います。 ランサーズとは? ランサーズといえば言わずと ...

続きを読む

-プログラミング
-, ,

Copyright© TIS ENGINEER NOTE , 2018 All Rights Reserved Powered by AFFINGER5.