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

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

70ac3e9e67226ea693e90c7eb8605cd7?s=47 Yuki Kodama
February 07, 2017

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

70ac3e9e67226ea693e90c7eb8605cd7?s=128

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

  2. 自己紹介 @kuy (カイ) / Yuki Kodama 株式会社ジャパンベンチャーリサーチ(新橋 → 恵比寿) entrepedia(アントレペディア)の開発・運用

    AWS, Ruby on Rails, JavaScript (React+Redux+Saga) • redux-sagaでルーティングを制する • redux-sagaで非同期処理と戦う • Reduxでコンポーネントを再利用する • ・・・など Qiita の記事
  3. redux-tower というのは・・・ • redux-saga を使ったルーティングライブラリ • ルートがアクティブになってからコンポーネントを表示するまでのロジックを Saga で書く →

    フルコントロール可能 ◦ データの読み込み、認証、フォーム内容が変更されていたらページ遷移をブ ロック、途中でリダイレクト、...etc • ルート定義は JSON(JSX は使わない) ◦ ネスト可能、Entering/Leavingフック、省略記法 • SSR は未対応(試してすらいない・・・) ◦ 自分が SSR やってないだけなので PR 歓迎! リポジトリ https://github.com/kuy/redux-tower
  4. ルート定義 #1 ルート定義 ルートアクション (Saga) パス + =

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

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

  7. 仕組み #1 • redux-sagaとルートアクションの間に入るProxy Generator ◦ redux-tower 自体も redux-saga で動く

    Saga の1つにすぎない • redux-saga ↔ redux-tower ↔ ルートアクション ◦ パスの変更を検出してルート定義とのマッチング ◦ ルートアクションもただのGeneratorなのでnext()呼び出してyieldされ た値を取り出す ◦ 省略記法のときだけSagaのEffectに変換したり、特別な処理 ◦ あとはredux-sagaに丸投げ
  8. 仕組み #2 通常のSagaのEffectだった場合(callとかtakeとか)

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

  10. 今後 • セットアップの簡素化 • Leavingフックの改善 • スクロール位置の復元 • バグ直さないと・・・ •

    明日、redux-towerを使った社内向けシステムの管理画面リリース • 1.0 リリース ◦ その前にまずは 0.1.0 リリース
  11. ブログアプリのデモ http://kuy.github.io/redux-tower/blog/

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