Redux + Rails4.2 のベースを作ってみた
前回に続き
一ヶ月前以下のような記事を書きました。
Redux の考え方を自分なりの言葉で落としてみたんですが、実際コードがないとわからんよね、ってところで React + Rails なコードをちょうど友人がサンプルで上げていたのでそこからフォークして Redux 組み込んでみました。
ベース
詳しくはこの 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 上を見てください。
ルーティングもしてみる
色々不要なのも実は上記のコミットに入っちゃってるのですが、React-Router を導入し、一部ちょこちょこ変更して、新しい component ファイルを入れて呼び出すとページ遷移も可能になります。
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 を更新するとうまくいくかと思います。
まとめ
コードベースではありますが、実際に React と Redux をコードに落としていけば良いのかをまとめてみました。
上記の 3つ (ベース部分、ルーティング、非同期通信) 周りの理解が進めばだいたい Redux の記述がしやすくなると思います。
ベースの部分の理解も少々大変なところはあると思いますが、大規模になればなるほどこの Redux の良さが効いてきますので、是非うまく使いこなしてみてください。
