深入淺出 Redux

'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

深入淺出 Redux

深入淺出 Redux

More Decks by shiningjason1989

Other Decks in Technology

Featured

Transcript