読者です 読者をやめる 読者になる 読者になる

筋肉とエンジニアリングで すべてを解決するブログ

筋トレ、JavaScript、Ruby で世界を変えてやります。

Redux + Rails4.2 のベースを作ってみた

前回に続き

一ヶ月前以下のような記事を書きました。

ma3tk.hateblo.jp

Redux の考え方を自分なりの言葉で落としてみたんですが、実際コードがないとわからんよね、ってところで React + Rails なコードをちょうど友人がサンプルで上げていたのでそこからフォークして Redux 組み込んでみました。

ベース

github.com

詳しくはこの Qiita の記事 に書いてあるので、大前提はこちらを参考に。

Redux を組み込んでみる

Redux を組み込んでみるサンプルとして、

  • 入力可能な input box (update_box) の設置
  • 入力した文字を送信するための Update Info Button の設置
  • 入力した文字を適当な場所に表示する

事を考えます。

やること

上記のような内容ですが、もっと具体的に書くと、

  • 入力可能な input box (update_box) の設置
    • input box を設置
    • ref 属性をつけて値を取得できるようにする
  • 入力した文字を送信するための Update Info Button の設置
    • button の設置
    • onClick した時の動作 ( Action の updateArticleInfo を呼び出すための関数、ref からの値取得) の記述
    • updateArticleInfo 内で Action 内の updateArticleInfo(update_text) を呼び出す
    • Action 内の updateArticleInfo(update_text) では Reducer へ渡すための object を記載
    • Reducer 内で Article の article_info を更新する
  • 入力した文字を適当な場所に表示する
    • Article という state の article_info を表示するよう記載する

こんなところでしょうか。

ディレクトリ構成と main.js

前回の記事にあるようなつくりにします。

$ tree frontend/src/javascripts
frontend/src/javascripts
├── actions
├── components
├── constants
├── main.js
├── reducers
├── store
└── utils

で、実際に変更した diff

github.com

上記のコミットになります。

詳しいことはコメントしてあるので Github 上を見てください。

ルーティングもしてみる

色々不要なのも実は上記のコミットに入っちゃってるのですが、React-Router を導入し、一部ちょこちょこ変更して、新しい component ファイルを入れて呼び出すとページ遷移も可能になります。

github.com

Link という機能が React-Router に入っていますので、それを使うと勝手に遷移してくれます。

また、Router にはいろんなものがあるのですが、 React-Router がデファクトスタンダードだという情報を見たのでこれにしてます。

Ajax でデータを取得する

もちろん、ネットワーク関係ない簡単なものであればそれはそれで楽なのですが、大体の場合 API を介してやり取りする必要が出てくるかと思います。

https://github.com/ma3tk/react-test/pull/2/files#diff-c1e153d5c761452afbe856e869f84099R12

上記のような形で fetch() し、 then() に取得時の処理を記載しておけば非同期通信が可能になります。

非同期通信後は 別な function で定義した Action を Dispatch してあげて state を更新するとうまくいくかと思います。

github.com

まとめ

コードベースではありますが、実際に React と Redux をコードに落としていけば良いのかをまとめてみました。

上記の 3つ (ベース部分、ルーティング、非同期通信) 周りの理解が進めばだいたい Redux の記述がしやすくなると思います。

ベースの部分の理解も少々大変なところはあると思いますが、大規模になればなるほどこの Redux の良さが効いてきますので、是非うまく使いこなしてみてください。