TIS ENGINEER NOTE

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

プログラミング

React + ReduxでActionCableに通信する書き方をサクッと紹介

更新日:

  • Ruby on Rails 5から導入されたリアルタイム通信機能であるActionCable
  • 浮き沈みの激しいフロントエンドフレームワーク界隈で強い人気を誇るReact
  • 一定規模以上のReact開発では欠かせないアーキテクチャであるRedux

今回はこの3つの技術を使用してチャットツールを開発したときの経験を元に、React + Redux でActionCableに通信を行うための書き方についてざっくり紹介します。

各々の環境については構築済であることを前提に進めていきます。

Railsの実装

最低限のリアルタイム通信を実装するならば、Rails側のActionCableはマニュアル通りの実装で問題ありません。

フロント側の記述の例を分かりやすくする為にチャンネルのサンプルを置いておきます。

フロントからデータを受け取って、同じチャンネルにいる接続に向けてブロードキャストするというシンプルな構成です。

ちなみにクライアント側の接続処理はRailsがデフォルトで生成する次のJavaScriptコードがよしなにやってくれています。

React&Reduxの実装

フロント側の実装も単純な機能であればシンプルな記述で実現できます。

メインのクラス配下に以下のメソッド記述します。

Action

ActionCableから通信を受けたときのアクションを実装します。

Reducer

Storeの状態を渡されたActionに応じて変更します。

ここでは現在画面に表示しているmessagesステータスに対して、ActionCableよりブロードキャストされたデータを追加しています。

メイン処理

ActionCableと通信を行うためのメインの処理となります。

それぞれ接続時、切断時、受信時、送信時の処理を書いています。

あとはフォームボタンクリック時にサーバー側のメソッドの呼び出しを実装すればOKです。

まとめ

React/Reduxは実装方法が柔軟なため、サンプル毎に実装が異なっていて情報を見つけるのに結構苦労しました。

今回の記事がお役に立てば幸いです。

よく読まれている記事

エンジニア入門

2018/8/19

プログラミング初心者に贈る挫折しない為の3つの心構え

こんにちは、フリーエンジニアのてぃすです。 最近では未経験者からプログラマー・エンジニアへの転身を志しプログラミングを学習を始めている人が増えていますね。 しかし理解出来ない部分が出てきたり、モチベーションを保てずに学習途中で挫折していまうという話も多く耳に入ってきます。 そこで今回は文系出身から職業プログラマーへ進んだ僕が、挫折しないプログラミング学習の進め方・心構えについてお話していこうと思います。 目的が具体的にイメージできる教材を使用する プログラミングの学習を始めて間もないときに、 変数に値を代 ...

続きを読む

エンジニア独立

2018/1/13

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

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

続きを読む

エンジニア入門

2018/11/14

○ヶ月でプログラマーになれる vs そんな簡単になれない論争について

こんばんは。フリーエンジニアのてぃすです。 最近TwitterをはじめとするSNSやブログなどで度々繰り返されている 「○ヶ月でエンジニア/プログラマーになれる」という広告や意見に対する、 「エンジニア/プログラマーはそう簡単になれる職業ではない」 という意見から始まる論争。 今日は実際にプログラマーとしてご飯を食べていて、職業エンジニアになるためのノウハウについての記事も投稿している立場から、この一連のやりとりについて意見してみようと思います。 「○ヶ月でエンジニア/プログラマーになれる」という広告・意 ...

続きを読む

エンジニア独立

2018/2/28

パーソルテクノロジースタッフの派遣でエンジニア歴2年の僕が時給2000円を余裕で超えた話

今いる会社を辞めることとなり、今後のエンジニアとしての身の振りを検討中のてぃすです。 今回とある派遣会社にて、業務経験なしのRuby on Railsの案件を紹介してもらい、その時給が2000円を超えていました。 月給換算したら1,2年目の正社員の給与を余裕で超えてきます。派遣という働き方の印象がガラッと変わる体験をしました。 今回はエンジニア歴2年の僕にそんな素敵な待遇を提供してくれたパーソルテクノロジースタッフについて、実体験を交えて語っていこうと思います。 エンジニア派遣の「パーソルテクノロジースタ ...

続きを読む

エンジニア独立

2018/7/29

中小SESに入社するなら、派遣エンジニアになった方が100倍幸せになれるというお話

こんにちは。フリーランスエンジニアのてぃすです。 僕はこれまで、 中小SES正社員 派遣エンジニア フリーランスエンジニア として活動してきましたが、その中で中小SESで正社員として働いていたときが、最も無駄な期間であったと確信しております。 給与・自分の時間・キャリア・経験のどれを取っても得られるものが少なく、エンジニアとして働く中で第三者に搾取される割合が最も多い働き方です。 そこで今回は僕がこれまでキャリアを積む中で確信した中小SESに入社するなら、派遣エンジニアになった方が100倍幸せになれるとい ...

続きを読む

-プログラミング
-, , ,

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