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
410
Reason
kuy
1
2.3k
Should I use redux-saga or not?
kuy
2
4.5k
redux-sagaで副作用をコントロールする
kuy
4
1.5k
Rails+webpackの落ち穂拾い
kuy
0
1.8k
なぜReduxを使うのか
kuy
25
11k
意地でもReduxを使う
kuy
1
550
Other Decks in Technology
See All in Technology
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
6
1.9k
Raycast Favorites × Script Command で実現するお手軽情報チェック
smasato
1
120
生成 AI プロダクトを育てる技術 〜データ品質向上による継続的な価値創出の実践〜
icoxfog417
PRO
5
1.9k
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
6
1.8k
MIMEと文字コードの闇
hirachan
2
1.4k
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
310
データマネジメントのトレードオフに立ち向かう
ikkimiyazaki
6
1.2k
OpenID BizDay#17 KYC WG活動報告(法人) / 20250219-BizDay17-KYC-legalidentity
oidfj
0
450
RemoveだらけのPHPUnit 12に備えよう
cocoeyes02
0
120
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
12
3.6k
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.5k
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
180
Featured
See All Featured
A Tale of Four Properties
chriscoyier
158
23k
Optimizing for Happiness
mojombo
376
70k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Faster Mobile Websites
deanohume
306
31k
The Invisible Side of Design
smashingmag
299
50k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Bash Introduction
62gerente
611
210k
What's in a price? How to price your products and services
michaelherold
244
12k
Writing Fast Ruby
sferik
628
61k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
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 !! ”));