やりなおしRedux - Redux Routerでコンテキストをわけると楽になる

Reduxをとりあえずわかったつもりになったおれは早速俺用wikiをSPAで作ったのですが、なんだかつらくて、「こんなにつらいのになぜReduxが流行っているのだろうか、おれが間違っているのだろうか……」 → 「間違っていたのでやりなおしました」というのがあらすじ。

ReduxRouterはコンテキストを適切に分割する

ReduxRouterはReactRouterをラップするライブラリですが、React.Componentではなく、storeとconnectしている、ReduxとReactの接点(exampleなどでcontainersディレクトリに配置されがちなクラス)を切りかえられます。

まず前回のつらさ

前回ではReduxRouterを用いず、自分の手でコンテキストの切り替えを行っていました。

Writer
  └ App
      ├ Login
      ├ Index
      └ Memo

WriterがReactDIM.renderやStoreの生成を行うエントリポイントで、Appがcontainers以下にあるクラスで、その他は素のReact.Componentです。

Appでは

という処理を行っていましたが、Redux的なものを下々のReact.Componentに混入させない、というお約束を頑なに守ろうとした結果、全コンテキストのメソッドやプロパティが網羅され、Appクラス内のソースはどんちゃん騒ぎになりました。

login、saveMemo、deleteMemo、startEdit、indexMemo、renderSlim、selectTagなどといったものがずらずらずらずら並んでいたわけです。

3コンテキストのみであるから持久走的に乗り切れましたが、もうちょっと増えただけで破綻するのは目に見えていました。これが前回感じていたおもなつらさです。

ReduxRouterが楽にしてくれる

ReduxRouterはcontainersごと切りかえてくれるので、Writerからダイレクトに複数のcontainersを生やすことができます。

Writer
 ├ Login
 ├ Index
 └ Memo

これにより、LoginではLoginの、IndexではIndexの、必要なプロパティや必要なActionを必要なだけ書くだけで済むようになりました。

Login、Index、Memoクラスをcontainers以下に新たに作ることになりましたが、書かなければならない内容がそのコンテキストの関心ごとのみになったので、非常に書きやすくなりました。

ソースとまとめ

memo_dock/lib/alt/redux/writer at master · mmmpa/memo_dock

前回は自分の半端な知識を原因としたつらみによりつらいつらい言ってしまったので、訂正したいと思ってめもりました。