redux-tower でルーティングを制する @kuy / Yuki Kodama 2017.02.07 @ Meguro.es #8

自己紹介 @kuy (カイ) / Yuki Kodama 株式会社ジャパンベンチャーリサーチ（新橋 → 恵比寿） entrepedia（アントレペディア）の開発・運用 AWS, Ruby on Rails, JavaScript (React+Redux+Saga) ● redux-sagaでルーティングを制する ● redux-sagaで非同期処理と戦う ● Reduxでコンポーネントを再利用する ● ・・・など Qiita の記事

redux-tower というのは・・・ ● redux-saga を使ったルーティングライブラリ ● ルートがアクティブになってからコンポーネントを表示するまでのロジックを Saga で書く → フルコントロール可能 ○ データの読み込み、認証、フォーム内容が変更されていたらページ遷移をブ ロック、途中でリダイレクト、...etc ● ルート定義は JSON（JSX は使わない） ○ ネスト可能、Entering/Leavingフック、省略記法 ● SSR は未対応（試してすらいない・・・） ○ 自分が SSR やってないだけなので PR 歓迎！ リポジトリ https://github.com/kuy/redux-tower

ルート定義 #1 ルート定義 ルートアクション （Saga） パス ＋ ＝

ルート定義 #2 ReduxのStateからログイン状態を取得して、未ログインのときのみログイ ンページにリダイレクト

ルート定義 #3 ログイン処理の結果を待って、成功したときは管理ページ、失敗したときは ログインページにリダイレクト

仕組み #1 ● redux-sagaとルートアクションの間に入るProxy Generator ○ redux-tower 自体も redux-saga で動く Saga の1つにすぎない ● redux-saga ↔ redux-tower ↔ ルートアクション ○ パスの変更を検出してルート定義とのマッチング ○ ルートアクションもただのGeneratorなのでnext()呼び出してyieldされ た値を取り出す ○ 省略記法のときだけSagaのEffectに変換したり、特別な処理 ○ あとはredux-sagaに丸投げ

仕組み #2 通常のSagaのEffectだった場合（callとかtakeとか）

仕組み #3 React コンポーネントが yield された場合（省略記法）

今後 ● セットアップの簡素化 ● Leavingフックの改善 ● スクロール位置の復元 ● バグ直さないと・・・ ● 明日、redux-towerを使った社内向けシステムの管理画面リリース ● 1.0 リリース ○ その前にまずは 0.1.0 リリース

ブログアプリのデモ http://kuy.github.io/redux-tower/blog/

yield call(say(“ Thank you !! ”));