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

      2018/01/02

  • 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は実装方法が柔軟なため、サンプル毎に実装が異なっていて情報を見つけるのに結構苦労しました。

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

 - プログラミング , , ,