Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
redux-towerでルーティングを制する
Search
Yuki Kodama
February 07, 2017
Technology
4
2.8k
redux-towerでルーティングを制する
Yuki Kodama
February 07, 2017
Tweet
Share
More Decks by Yuki Kodama
See All by Yuki Kodama
マイクロフロントエンドの現状確認
kuy
0
370
Reason
kuy
1
2.2k
Should I use redux-saga or not?
kuy
2
4.4k
redux-sagaで副作用をコントロールする
kuy
4
1.5k
Rails+webpackの落ち穂拾い
kuy
0
1.7k
なぜReduxを使うのか
kuy
25
11k
意地でもReduxを使う
kuy
1
540
Other Decks in Technology
See All in Technology
新卒1年目が挑む!生成AI × マルチエージェントで実現する次世代オンボーディング / operation-ai-onboarding
cyberagentdevelopers
PRO
1
160
visionOSでの空間表現実装とImmersive Video表示について / ai-immersive-visionos
cyberagentdevelopers
PRO
1
100
生成AIと知識グラフの相互利用に基づく文書解析
koujikozaki
1
130
サイバーエージェントにおける生成AIのリスキリング施策の取り組み / cyber-ai-reskilling
cyberagentdevelopers
PRO
2
180
[JAWS-UG金沢支部×コンテナ支部合同企画]コンテナとは何か
furuton
3
230
AWSコンテナ本出版から3年経った今、もし改めて執筆し直すなら / If I revise our container book
iselegant
15
3.9k
よくわからんサービスについての問い合わせが来たときの強い味方 Amazon Q について
kazzpapa3
0
220
Apple/Google/Amazonの決済システムの違いを踏まえた定期購読課金システムの構築 / abema-billing-system
cyberagentdevelopers
PRO
1
210
AWS re:Inventを徹底的に楽しむためのTips / Tips for thoroughly enjoying AWS re:Invent
yuj1osm
1
540
Vueで Webコンポーネントを作って Reactで使う / 20241030-cloudsign-vuefes_after_night
bengo4com
4
2.5k
2024-10-30-reInventStandby_StudyGroup_Intro
shinichirokawano
1
610
最速最小からはじめるデータプロダクト / Data Product MVP
amaotone
5
720
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
We Have a Design System, Now What?
morganepeng
50
7.2k
BBQ
matthewcrist
85
9.3k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
GitHub's CSS Performance
jonrohan
1030
460k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
The Invisible Side of Design
smashingmag
297
50k
Code Reviewing Like a Champion
maltzj
519
39k
The Cost Of JavaScript in 2023
addyosmani
45
6.6k
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 !! ”));