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
460
Reason
kuy
1
2.3k
Should I use redux-saga or not?
kuy
2
4.6k
redux-sagaで副作用をコントロールする
kuy
4
1.6k
Rails+webpackの落ち穂拾い
kuy
0
1.8k
なぜReduxを使うのか
kuy
25
12k
意地でもReduxを使う
kuy
1
570
Other Decks in Technology
See All in Technology
Pythonによる契約プログラミング入門 / PyCon JP 2025
7pairs
5
2.3k
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.5k
自作LLM Native GORM Pluginで実現する AI Agentバックテスト基盤構築
po3rin
2
210
20250929_QaaS_vol20
mura_shin
0
110
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
spiderplus_cb
0
300
“2件同時配達”の開発舞台裏 〜出前館PMが挑んだダブルピック実現に向けた体験設計〜
demaecan
0
160
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
290
入門 FormObject / An Introduction to FormObject #kaigionrails
expajp
2
1.6k
extension 現場で使えるXcodeショートカット一覧
ktombow
0
100
AIを導⼊しても、 開発⽣産性は"爆増"していない なぜ?
kinosuke01
4
3.6k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
77k
タスクって今どうなってるの?3.14の新機能 asyncio ps と pstree でasyncioのデバッグを (PyCon JP 2025)
jrfk
1
140
Featured
See All Featured
Building Applications with DynamoDB
mza
96
6.6k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
Six Lessons from altMBA
skipperchong
28
4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Agile that works and the tools we love
rasmusluckow
330
21k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
560
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 !! ”));