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
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
shiningjason1989
July 05, 2016
Technology
12k
2
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
深入淺出 Redux
shiningjason1989
July 05, 2016
More Decks by shiningjason1989
See All by shiningjason1989
5 分鐘與我一起探索最佳的搜尋體驗
shiningjason1989
1
64
I want to be a web guitar player
shiningjason1989
0
350
PikaPika
shiningjason1989
2
850
前端之今天的我,未來的我們
shiningjason1989
0
280
Progressive Web App 之是否是我的未來
shiningjason1989
4
1.5k
Flux 角色詳解
shiningjason1989
4
10k
Flux 流程詳解
shiningjason1989
2
9.8k
如何打造一個百人 stars 的 React Native 元件
shiningjason1989
1
270
前端魔法師召集令
shiningjason1989
1
260
Other Decks in Technology
See All in Technology
作って終わりにしない タイミーのセマンティックレイヤー育成の現在地
chanyou0311
3
2.1k
DevOps Agentで始めるAWS運用 〜フロンティアエージェントが変える運用の現場〜
nyankotaro
1
380
On-behalf-of Token exchange with AgentCore Identity
hironobuiga
2
140
Socrates × Looker 〜セマンティックレイヤーで進化するデータ分析エージェント〜
hanon52_
3
2.1k
中期計画、2回作ってみた ~業務委託と正社員、両方の視点から~
demaecan
1
650
「エンジニア進化論」2028年の開発完全自動化、エンジニアはどう進化するか
cyberagentdevelopers
PRO
4
4.3k
2026TECHFRESH畢業分享會 - 原生還是跨平台? App 開發踩坑實錄
line_developers_tw
PRO
0
720
社内 AI エージェント Synapse と セマンティックレイヤーの育て方
hiroakis
2
1.6k
AI駆動開発を通して感じた、 AI時代のデザイナーの役割変化
whisaiyo
0
190
Building applications in the Gemini API family.
line_developers_tw
PRO
0
2.8k
地球に⽣きるAI —GeoAIと「中間領域」— / AI Living on Earth — GeoAI and the “Intermediate Layer” —
ykiyota
0
260
MCP Appsを作ってみよう
iwamot
PRO
4
480
Featured
See All Featured
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
1.1k
Amusing Abliteration
ianozsvald
1
200
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
2.8k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
770
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1.1k
Prompt Engineering for Job Search
mfonobong
0
340
Why Our Code Smells
bkeepers
PRO
340
58k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
2k
The #1 spot is gone: here's how to win anyway
tamaranovitovic
2
1.1k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
190
How to Ace a Technical Interview
jacobian
281
24k
Transcript
3FEVY
'MVY 䱳鎣3FEVY⯓㔐곃
Dispatcher Stores Views Action Action
㻜♳䧮⦛剚呏亙♶ず噠䬓ⴕ4UPSF Dispatcher Store Views Action Action Store Store
㻜♳䧮⦛剚呏亙♶ず噠䬓ⴕ4UPSF ⢿㥶5PEP4UPSF 6TFS4UPSF Dispatcher Store Views Action Action TodoStore UserStore
齡랃⡹鼩鎹䖤4UPSF⨞✫ㆭ❉✲䞕㌨ Dispatcher Store Views Action Action Store Store
4UPSF剤Ⰽ⦐⚺銴耷顑 Store
4UPSF剤Ⰽ⦐⚺銴耷顑 ⮭㶸须俲朜䢀 Store let state = 0
4UPSF剤Ⰽ⦐⚺銴耷顑 ⮭㶸须俲朜䢀 呏亙"DUJPO佖隶须俲朜䢀 Store let state = 0 function change(action)
{ state = action.data }
⢪欽'MVY剚麂ⵌ涸 ㉏겗
殹䧮⦛⥜佖 Store state: 10 let state = 0 function change(action)
{ state = action.data }
殹䧮⦛⥜佖呏亙"DUJPO佖隶朜䢀涸齅鱀 Store state: 10 let state = 0 function change(action)
{ state = action.data + 1 }
殹䧮⦛⥜佖呏亙"DUJPO佖隶朜䢀涸齅鱀 㔔捀侮佅4UPSF刿倞✫须俲朜䢀⛳剚ꅾ縨 Store state: 0 let state = 0 function
change(action) { state = action.data + 1 }
⡹〳⟃䟝⫹殹⡹佖㸤♧⦐CVH Store user: Jason
⡹〳⟃䟝⫹殹⡹佖㸤♧⦐CVH 捀✫庠鑑㽠䗳갭ⱄ駵♧妄鏽ⱁ崩玑涸汥蕲㌨ Store user: null
鍑对 㥶⡦
⡹剤涮植鸏ꡠ꒳㉏겗僽➊랃㌨ Store let state = 0 function change(action) { state
= action.data }
4UPSF剤Ⰽ⦐⚺銴耷顑 ⮭㶸朜䢀 呏亙"DUJPO佖隶朜䢀 Store let state = 0 function change(action)
{ state = action.data }
4UPSF剤Ⰽ⦐⚺銴耷顑 䧮⦛䗳갭䪾㸐⦛䬓雊㸐⦛♶剚✽湱䕧갠 Store let state = 0 function change(action) {
state = action.data }
&MN ㉬涮倴
㖈&MNBSDIJUFDUVSF⚥刿倞.PEFM涸倰䒭僽 (msg, model) => model'
㖈&MNBSDIJUFDUVSF⚥刿倞.PEFM涸倰䒭僽 (msg, model) => model' 缺䧭涯鑨俒㽠僽 (ᤈ傶, 制眲) => 碝制眲
㖈&MNBSDIJUFDUVSF⚥刿倞.PEFM涸倰䒭僽 (msg, model) => model' 缺䧭涯鑨俒㽠僽 (ᤈ傶, 制眲) => 碝制眲
ⱄ涯♧럊㽠僽 蝚螂Ӟ㮆獢碍牧妔Ԩᤈ傶制眲牧ࢧ㯽碝制眲
䨾⟃䧮⦛䪾呏亙"DUJPO佖隶朜䢀涸齅鱀 㹁纏䧭♧⦐ⴅ侸 (action, state) => state'
䨾⟃䧮⦛䪾呏亙"DUJPO佖隶朜䢀涸齅鱀 㹁纏䧭♧⦐ⴅ侸 (action, state) => state' 䧮⦛〭鸏♧⦐ⴅ侸捀SFEVDFS
3FEVDFS 3FEVY剓呍䗱涸錚䙂
(action, state) => state' 3FEVDFS涸㥪贖僽 〳갸劍殹侸窍✮♧垺涸㔐⫄穡卓㽠剚♧垺
(action, state) => state' 3FEVDFS涸㥪贖僽 〳갸劍殹侸窍✮♧垺涸㔐⫄穡卓㽠剚♧垺 ⴅ侸管玑㸐㽠〫僽♧⦐矦㋲涸ⴅ侸
(action, state) => state' 3FEVDFS涸㥪贖僽 〳갸劍殹侸窍✮♧垺涸㔐⫄穡卓㽠剚♧垺 ⴅ侸管玑㸐㽠〫僽♧⦐矦㋲涸ⴅ侸 〳⟃殹⡲侸⫄黃䧴罏乩剤Ⱖ➮ⴅ侸管玑涸⮛럊
(action, state) => state' 3FEVDFS涸㥪贖僽 〳갸劍殹侸窍✮♧垺涸㔐⫄穡卓㽠剚♧垺 ⴅ侸管玑㸐㽠〫僽♧⦐矦㋲涸ⴅ侸 〳⟃殹⡲侸⫄黃䧴罏乩剤Ⱖ➮ⴅ侸管玑涸⮛럊 〳⟃⨞ⵌVOEPSFEP涸⸆腋
(action, state) => state' 3FEVDFS涸㥪贖僽 〳갸劍殹侸窍✮♧垺涸㔐⫄穡卓㽠剚♧垺 ⴅ侸管玑㸐㽠〫僽♧⦐矦㋲涸ⴅ侸 〳⟃殹⡲侸⫄黃䧴罏乩剤Ⱖ➮ⴅ侸管玑涸⮛럊 〳⟃⨞ⵌVOEPSFEP涸⸆腋
〳⟃⟤䠑佖隶锅欽ⴅ侸涸갫䎸
3FEVY 涸䧭䕎
㥶卓䧮⦛锅侮4UPSF鸏⦐錬蒀 Dispatcher Store Views Action Action Store Store
㥶卓䧮⦛锅侮4UPSF鸏⦐錬蒀 㼟嫦⦐4UPSF涸噠朜䢀̔ Store Store Store ̔
Store Store Store Store ̔ state subState subState subState 㥶卓䧮⦛锅侮4UPSF鸏⦐錬蒀
㼟嫦⦐4UPSF涸噠朜䢀̔穉䧭♧⦐朜䢀埠
㥶卓䧮⦛锅侮4UPSF鸏⦐錬蒀 㼟嫦⦐4UPSF涸噠朜䢀̔穉䧭♧⦐朜䢀埠 Store ̔ state auth todo user AuthStore TodoStore
UserStore
㥶卓䧮⦛锅侮4UPSF鸏⦐錬蒀 㼟嫦⦐4UPSF涸噠朜䢀̔穉䧭♧⦐朜䢀埠 㼟嫦⦐4UPSF佖隶朜䢀涸齅鱀 Store Store Store ̔ Store state subState
subState subState
㥶卓䧮⦛锅侮4UPSF鸏⦐錬蒀 㼟嫦⦐4UPSF涸噠朜䢀̔穉䧭♧⦐朜䢀埠 㼟嫦⦐4UPSF佖隶朜䢀涸齅鱀̔㼩䥰䧭嫦⦐3FEVDFS Store Store Store ̔ Store state subState
subState subState Store Store Reducer
Store ̔ state auth todo user AuthStore TodoStore UserStore 㥶卓䧮⦛锅侮4UPSF鸏⦐錬蒀
㼟嫦⦐4UPSF涸噠朜䢀̔穉䧭♧⦐朜䢀埠 㼟嫦⦐4UPSF佖隶朜䢀涸齅鱀̔㼩䥰䧭嫦⦐3FEVDFS reducer todoReducer userReducer authReducer
䨾⟃㥶卓㼟'MVY涸4UPSFT Dispatcher Store Views Action Action Store Store
䨾⟃㥶卓㼟'MVY涸4UPSFT 剐䳖䧭4UPSFㄤ3FEVDFST Dispatcher Store Views Action Action Store Store Reducer
state
㔔捀侮⦐䥰欽〫剤♧⦐4UPSF Dispatcher Store Views Action Action Store Store Reducer state
㔔捀侮⦐䥰欽〫剤♧⦐4UPSF 䧮⦛♶ⱄ銴%JTQBUDIFS Store Views Action Action Store Store Reducer state
罜鷴麕4UPSF䲿⣘涸"1* ⫄黃BDUJPO暟⟝ Store Views Action Action Store Store Reducer state
鸏㽠僽3FEVY Store Views Action Action Reducers