ReduxでのRoutingはこれでやっていこうと思います。ありえんHip-Hopスマートフォン用の表示で見るありえんHip-Hopこの広告は、90日以上更新していないブログに表示しています。2017-02-19ReduxでのRoutingはこれでやっていこうと思います。Reduxでの理想のRoutingライブラリを求めて作ったredux-pagesの紹介記事です。ryo33/Yayaka19以前の方法での不満redux-pagesを作るに当たって、まず、前にSPAサイトを作っていて不満に感じたことをまとめました。その中で、特に解決したかったものが以下の4つです。表示されているページによってMiddlewareでの処理内容を変えたいときにも必要だということです。anywhereは、このことを言っています。(2)は、Pathと画面表示は常に一致しているわけではないということです。閲覧権限の無いページのPathにアクセスして、エラーページのPathにリダイレクトされるまでの間は何を描画するべきでしょうか。Webサイトの中にはページ移動後にコンテンツのダウンロードが終わるまでは前のページが表示されたままのものがあります。このように、Pathと画面表示は常に一致するわけではありません。現在のページが常に分かるようになっている必要があります。(3)は、Pathを手書きすると、間違っていても発見しづらく、またPath形式の変更が容易でなくなってしまうためです。(4)は個人的な好みです。redux-pagesの基本的なアイデア以上で述べた不満を元にした基本的な考えは以下の3つです。Stateには現在どのページを表示すべきなのかが保持されるページオブジェクトを定義して、ページ遷移Actionや、そのページへのPathはメソッドで生成するページ遷移は単一のActionをdispatchすることで行う不満1を解消するのは(1)(2)、不満2を解消するのは(1)、不満3を解消するのは(2)、不満4を解消するのは(3)です。(3)で単一のActionになっているのはMiddlewareでのページ遷移処理を単純なコードで書くためです。ページ遷移を遅らせるときも単にnextDispatchを呼ぶのを遅らせるだけです。基本的な動作イメージredux-pagesを使ってページ遷移を行うときの基本的な動きを説明します。Actionをdispatchしてページ遷移redux-pagesのMiddlewareにActionが到達したときにPathが変更されるMiddlewareで様々な処理が行われるStateが変更されViewもそれに応じて変更されるこれが、基本的なページ遷移時の処理の流れです。ユーザー認証やリダイレクトなどは(2)のMiddlewareの中で行います。locationの変化によるページ遷移こちらは、ブラウザの戻るボタンなどが押されたときに使われます。Pathのパース結果でActionが投げられるMiddlewareで様々な処理が行われるStateが変更されViewもそれに応じて変更される実用redux-pagesはYayaka19というSPAアプリケーションで実際に使用しました。今のところは大きな問題など無く運用できてます。前述の不満の解消以外の利点としては複数のページに適用したい処理をまとめて書けることが挙げられます。allowedPageNames.includes(action.payload.name)というような条件文に応じてリダイレクトを行うだけです。あと、使ってから気づいたのですが、nextDispatchを遅らせることによりページ遷移を遅らせる技は滅多に使わないと思います。ロードが終了するまで前ページを表示するよりは、ページ遷移時のHookでisLoading状態にして、あのグルグルを表示したほうがSPAぽくなります。ちなみにページ遷移時のMiddlewareの処理にはredux-middlewaresを用いています。ログイン確認とそれによるリダイレクトにはcreateReplacerを、ページ遷移時のHookにはcreateAsyncHookを使います。個人的に直感的にMiddlewareを書くことができるので気に入っています。redux-logicなどを導入している場合はそちらを使ったほうがいいです。エラー処理も含めるとMiddlewareでActionを変換する必要があります。これをどうにかページ定義時に書くことができるようにしたいと考えています。あとは、導入時の雛形が比較的多いのもどうにかして減らしたいです。さいごに割とまともに使えて、辛いポイントもそんなにないので、とりあえずしばらくはこれを使っていこうと思います。20:04ReduxでのRoutingはこれでやっていこうと思います。