Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Yuki Kodama
February 07, 2017

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

Yuki Kodama

February 07, 2017
Tweet

More Decks by Yuki Kodama

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. ルート定義 #1
    ルート定義
    ルートアクション
    (Saga)
    パス


    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide