やりなおし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では
- locationを参照し、
- storeから渡されたstateから必要なプロパティを選んで
- そのコンテキストで必要なメソッドを選んで
- propsに詰め込んで適切なReact.Componentをrender
という処理を行っていましたが、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
前回は自分の半端な知識を原因としたつらみによりつらいつらい言ってしまったので、訂正したいと思ってめもりました。