React+Express+Node.js+MongoDBでブログっぽい何かを作る (2)React編前半

前回はExpressでAPIサーバを作った。
itto-ki.hatenablog.com

今回はReact+Reduxでフロントエンドを作っていく。
ただ、フロントエンドはやたらとコード量が増えたので、
ReactやReduxのtutorialを見れば分かるようなことには触れず、要点だけをまとめていく。

index.js

まずはエントリポイントとなるfrontend/project/src/index.jsについて。

gistced49142b1051759a64602b4a88d60b3

今回は非同期処理にredux-saga、ページ遷移処理にconnected-react-routerを使用している。
これらの仕様にはMiddlewareを用意してやる必要があるで、それを行っているのが13~15目。
ここで作ったMiddlewareを17~25行目でstoreに入れている。
複数のMiddlewareをstoreに渡す際にはapplyMiddlewareでまとめられる。

connected-react-router

今回のプロジェクトではルーティング処理にconncted-react-routerを使用した。
reactを補助するルーティングライブラリにはreact-router, react-router-reduxそしてconnected-react-routerと種類が豊富にあり、
どれを使用するのが良いのか非常に悩まされた。
様々な技術記事を読むとreact-router-reduxを使用している場合が多いみたいだが、サンプル通りコーディングしてもまともに動作しなかった。
α版だからかもしれないが、原因は現在調査中。

gist8a2c3c2ffc1b51ae382e9e1a297bc2de

今回はアクセスされるURLパスに応じて、それぞれ'/'ならArticleListに, '/new'ならCreator コンポーネントに振り分けている。
ArticleListはトップページとなるもので、記事の一覧が表示される。
Creatorはその名の通り、新しい記事を作成するためのもの。
上記のコードの様に、Switchタグの外にTopBarタグを記述することによって、
TopBarコンポーネントはいずれのURLパスであっても表示される。
ただし、ConnectedRouterタグはchildren elementとして1つしかelementを持てないため、
divタグで全体を囲う必要がある。

非同期処理

これが今回のコードを書いていく上で１番感動した。
redux-sagaを使用すると非同期処理が同期処理の様に記述できる。
こんな感じに。

gist3ff31487571ea48a5a99a7ef4e839ef5

非同期処理として呼び出される関数がジェネレーター関数として定義されている。
50~54行目でジェネレーター関数と対応するaction typeを結びつけていて、
actionが発生するとそれに対応するジェネレーター関数が別スレッドで実行される。
このように記述できるおかげで、同期処理の様に書けることはもちろん、
シンタックスの上で同期処理とは独立しているように書けるためコードが簡潔になる。

まとめ

ブログっぽい何かについて、記事一覧と記事作成機能を作成した。
要点は2つで、ルーティング処理と非同期処理。
それぞれconnected-react-routerとredux-sagaを使用することで簡潔に記述することが可能になる。

ここまででとりあえずはブログっぽいものが動くようになった(ブログよりTodoリストに近いが)。
コードは以下にある。
github.com

ここまでのコードはv0.1タグとしてまとめてある。