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
[AWS JAPAN 生成AIハッカソン] Dialog の紹介
yoshimi0227
0
140
2024-10-30-reInventStandby_StudyGroup_Intro
shinichirokawano
1
620
VPC間の接続方法を整理してみた #自治体クラウド勉強会
non97
1
810
WINTICKETアプリで実現した高可用性と高速リリースを支えるエコシステム / winticket-eco-system
cyberagentdevelopers
PRO
1
190
チームを主語にしてみる / Making "Team" the Subject
ar_tama
4
300
Forget efficiency – Become more productive without the stress
ufried
0
100
IaC運用を楽にするためにCDK Pipelinesを導入したけど、思い通りにいかなかった話
smt7174
1
110
LeSSに潜む「隠れWF病」とその処方箋
lycorptech_jp
PRO
2
120
ABEMA のコンテンツ制作を最適化!生成 AI x クラウド映像編集システム / abema-ai-editor
cyberagentdevelopers
PRO
1
180
現地でMeet Upをやる場合の注意点〜反省点を添えて〜
shotashiratori
0
510
生成AIと知識グラフの相互利用に基づく文書解析
koujikozaki
1
140
新卒1年目が向き合う生成AI事業の開発を加速させる技術選定 / ai-web-launcher
cyberagentdevelopers
PRO
7
1.5k
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
790
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Done Done
chrislema
181
16k
Code Review Best Practice
trishagee
64
17k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
A Tale of Four Properties
chriscoyier
156
23k
Facilitating Awesome Meetings
lara
49
6k
Into the Great Unknown - MozCon
thekraken
31
1.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
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 !! ”));