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
440
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
11k
意地でもReduxを使う
kuy
1
570
Other Decks in Technology
See All in Technology
キャディでのApache Iceberg, Trino採用事例 -Apache Iceberg and Trino Usecase in CADDi--
caddi_eng
0
170
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
200
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
10
3.6k
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
2
380
2025/6/21 日本学術会議公開シンポジウム発表資料
keisuke198619
2
470
doda開発 生成AI元年宣言!自家製AIエージェントから始める生産性改革 / doda Development Declaration of the First Year of Generated AI! Productivity Reforms Starting with Home-grown AI Agents
techtekt
0
190
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
2
150
AIにどこまで任せる?実務で使える(かもしれない)AIエージェント設計の考え方
har1101
3
1.2k
LinkX_GitHubを基点にした_AI時代のプロジェクトマネジメント.pdf
iotcomjpadmin
0
160
JSX - 歴史を振り返り、⾯⽩がって、エモくなろう
pal4de
3
1.1k
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
830
活きてなかったデータを活かしてみた話 / Shirokane Kougyou vol 19
sansan_randd
1
400
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Docker and Python
trallard
44
3.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
We Have a Design System, Now What?
morganepeng
52
7.6k
Unsuck your backbone
ammeep
671
58k
RailsConf 2023
tenderlove
30
1.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Adopting Sorbet at Scale
ufuk
77
9.4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Faster Mobile Websites
deanohume
307
31k
What's in a price? How to price your products and services
michaelherold
245
12k
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 !! ”));