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
shiningjason1989
July 05, 2016
Technology
2
12k
深入淺出 Redux
shiningjason1989
July 05, 2016
Tweet
Share
More Decks by shiningjason1989
See All by shiningjason1989
5 分鐘與我一起探索最佳的搜尋體驗
shiningjason1989
1
47
I want to be a web guitar player
shiningjason1989
0
230
PikaPika
shiningjason1989
2
780
前端之今天的我,未來的我們
shiningjason1989
0
240
Progressive Web App 之是否是我的未來
shiningjason1989
4
1.5k
Flux 角色詳解
shiningjason1989
4
9.3k
Flux 流程詳解
shiningjason1989
2
9.1k
如何打造一個百人 stars 的 React Native 元件
shiningjason1989
1
260
前端魔法師召集令
shiningjason1989
1
240
Other Decks in Technology
See All in Technology
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
1
530
require(ESM)とECMAScript仕様
uhyo
3
760
オーナーシップを持つ領域を明確にする
konifar
13
3.2k
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
3
570
地理空間データ可視化・解析・活用ソリューション Pacific Spatial Solutions (PSS)
pacificspatialsolutions
0
290
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
4
16k
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
170
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
3
850
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
170
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
260
ゼロから始めるVue.jsコミュニティ貢献 / first-vuejs-community-contribution-link-and-motivation
lmi
1
130
現代CSSフレームワークの内部実装とその仕組み
poteboy
7
3.6k
Featured
See All Featured
It's Worth the Effort
3n
180
27k
A designer walks into a library…
pauljervisheath
200
23k
Why Our Code Smells
bkeepers
PRO
331
56k
YesSQL, Process and Tooling at Scale
rocio
164
13k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
For a Future-Friendly Web
brad_frost
172
9k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
We Have a Design System, Now What?
morganepeng
43
6.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
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