Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
redux-towerでルーティングを制する
Yuki Kodama
February 07, 2017
Technology
4
2.7k
redux-towerでルーティングを制する
Yuki Kodama
February 07, 2017
Tweet
Share
More Decks by Yuki Kodama
See All by Yuki Kodama
Reason
kuy
1
1.9k
Should I use redux-saga or not?
kuy
2
3.8k
redux-sagaで副作用をコントロールする
kuy
4
1.4k
Rails+webpackの落ち穂拾い
kuy
0
1.5k
なぜReduxを使うのか
kuy
25
10k
意地でもReduxを使う
kuy
1
520
Other Decks in Technology
See All in Technology
Citizen 개발기
outsider
0
330
DOM Invader - prototype pollution対応の衝撃 - / DOM Invader - prototype pollution
okuken
0
170
Custom AppをIP制限ありのままで審査に通す方法
yusuga
0
700
History of the ML system in KARTE
kargo113
1
670
スクラムのスケールとチームトポロジー / Scaled Scrum and Team Topologies
daiksy
1
460
UIKitのアップデート #WWDC22
akatsuki174
4
350
20220628event_ogura_part
caddi_eng
0
150
ドメイン知識の蓄積が開発に起こす100のこと
codmoninc
0
120
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
3
9.2k
PUTとPOSTどっち使う?
hankehly
0
280
プログラマがオブジェクト指向しても幸せになれない理由
shirayanagiryuji
0
170
Meet passkeys
satotakeshi
1
130
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
Making the Leap to Tech Lead
cromwellryan
113
7.4k
It's Worth the Effort
3n
172
25k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
37
3.3k
WebSockets: Embracing the real-time Web
robhawkes
57
5.4k
Navigating Team Friction
lara
175
11k
Optimizing for Happiness
mojombo
365
63k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
315
19k
Rails Girls Zürich Keynote
gr2m
86
12k
Practical Orchestrator
shlominoach
178
8.6k
Rebuilding a faster, lazier Slack
samanthasiow
62
7.2k
Transcript
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 !! ”));