redux-towerでルーティングを制する

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide