React-Router(react-router-dom)とReduxとRailsを組み合わせる

React-Router(react-router-dom)とReduxとRailsを組み合わせる

React-Router(react-router-dom)とReduxとRailsを組み合わせる

React-Router(react-router-dom)とReduxとRailsを組み合わせる へのコメントはまだありません

はじめに

React+Redux+RailsでSPAアプリを作ることになったので、あれこれ調べたのでメモです。
SPAというと、当然ですが、1つのページであれこれできちゃうものを作らなきゃいけないわけで・・・
そうなるとコンテンツ制御の仕組みが必要です。そこで登場するのがReact-Router-Dom。
で、これ単体では使い方簡単なんですが、RailsとReduxを絡めて動作させる方法が分からなかったので
あれこれ調べて、なんとか動くところまでたどり着いたので、メモを公開します。
React-Routerは古いようで、React-Router-Domにしてみました。。
ドキュメントが超少なくてまいりました。

完成図はこんな感じ。
青いところがメニューで、クリックすると、下のコンテンツがReact-Routerで入れ替わります。

rr-2

ソースコードはGitHubで公開しています。利用方法は、記事の末尾を参照ください。

Railsプロジェクト作成

Gemを調整して、bundle install

application.rbを編集

作った ES6(JavaScriptのバージョン)のソースをES5に自動変換するための設定を追記
config.browserify_rails の行を追加

config/application.rb

Rails に Reactインストール

application.jsの編集

app/assets/javascripts/application.js

・Reactは npmでインストールしたものを使うのでカット。
・require_tree . もカット

変更前

変更後

React、Redux、etc…の準備(node_modules)

React、Redux、React-Routerその他諸々を npm を使ってインストールします。

.babelrc ファイルをRailsのルートフォルダに作成

Reduxの標準的なフォルダを作成

components.js編集

app/assets/javascripts/components.js

アプリ名は 「MyApp」とします。

myapp.jsはアプリのエントリーポイントとなるJSファイルです。ここに定義したクラス名(const宣言)を
windowの下にセット(変数として公開)してやる。

変更前

変更後

Reduxでカウンターアプリ、+静的ページをひたすら作る

ここ以降、しばらくは、Reduxでカウンターのインクリメント、デクリメントできるアプリを作ります。
加えて、静的ページもいくつか作ります。
何も考えずにソースをコピーしていってやってください・・・

app/assets/javascripts/actions/index.js

app/assets/javascripts/components/About.js

app/assets/javascripts/components/Contact.js

app/assets/javascripts/components/Counter.js

app/assets/javascripts/components/Top.js

ここ withRouter という react-router-dom のクラスを使ってます。

app/assets/javascripts/containers/CCounter.js

app/assets/javascripts/reducers/counter.js

app/assets/javascripts/reducers/root.js

ここまでで、とりあえず、カウンターアプリと、静的ページは出来上がり。
これ以降、アプリのエントリーポイント、React-Router周りに必要な処理を記載します。

アプリのエントリーポイント

app/assets/javascripts/myapp.js

アプリケーションRoot

app/assets/javascripts/components/Root.js

アプリケーションのトップページ

app/assets/javascripts/components/App.js

Rails でコントローラーとビューを作成

ビューを調整

ビューを調整して、SPAアプリのコンポーネントを出力します。

app/views/myapp/index.html.erb

ルーティングの調整

React-Routerで ページ移動するたびに myapp/xxxx へ移動しますが、
このパスを myapp#index に割り当ててやる。

config/routes.rb

デザイン調整

app/assets/stylesheets/myapp.scss

動作確認

http://localhost:3000/myapp/index

以下のようなページが表示されれば、成功。
カウンターのページで、ボタンをクリックすると、カウンターが増減していたら、
Redux+React-Routerの組み合わせがうまく機能しているということになります。

rr-1

rr-2

rr-3

rr-4

プログラムからページ(Route)を切り替える

ボタンのクリックアクションなどでページを切り替えたい場合があると思います。
正式な方法かわかりませんが、以下の方法で出来ました。
Counterページから、Contactページに移動したらOKです。

プロパティに historyというのが存在するみたいで、それを利用します。
app/assets/javascripts/components/Counter.js

ボタンクリック
rr-10

Contactページヘ移動
rr-11

GitHubソースの利用方法

このソースはGitHubで公開していますので、ご自由に利用ください。

インストール手順

動作確認

ブラウザーで以下のURLへアクセス
http://localhost:3000/myapp/index

以上


About the author:

Related Posts

Leave a comment

Back to Top