過(guò)年期間伺通,除了吃飯打牌以外,似乎還是要來(lái)點(diǎn)正經(jīng)的肉拓。趁著還沒(méi)糜爛致死的早晨,來(lái)打這一篇React-Redux的簡(jiǎn)單筆記梳庆。
最近專(zhuān)案正用React-Redux重構(gòu)某個(gè)服務(wù)暖途,順勢(shì)就用這個(gè)當(dāng)主題寫(xiě)點(diǎn)筆記卑惜。
Redux流程簡(jiǎn)介
React這邊就先不贅述,直接從Redux的概念說(shuō)起驻售。
下圖是Redux的基本流程概念:
使用者從頁(yè)面上(View)執(zhí)行任何頁(yè)面上的event時(shí)露久,會(huì)將一個(gè)action給dispatch(把他當(dāng)成一個(gè)會(huì)把a(bǔ)ction丟出去給reducer的函式)出去。
而action定義了這個(gè)action的形態(tài)(type)和一些資料欺栗,來(lái)到reducer階段時(shí)毫痕,就會(huì)遍佈查詢(xún)有沒(méi)有針對(duì)這個(gè)type所做應(yīng)對(duì)的處理,這個(gè)處理就會(huì)將action的資料與原來(lái)的store產(chǎn)生更新迟几。
依據(jù)更新的內(nèi)容消请,會(huì)再向有對(duì)這個(gè)store改變內(nèi)容做訂閱的View發(fā)出更新訊號(hào),View這時(shí)候就會(huì)再依照狀況進(jìn)行re-render类腮。
代個(gè)實(shí)際的小案例臊泰,如果已經(jīng)理解可以跳過(guò)這段。
現(xiàn)在有個(gè)頁(yè)面如下:
使用者點(diǎn)擊加點(diǎn)按鈕蚜枢,利用dispatch缸逃,發(fā)出一個(gè)加點(diǎn)的action,稱(chēng)作ADD_POINTS_ACTION厂抽,這個(gè)action實(shí)際是一個(gè)function需频,會(huì)回傳一個(gè)物件裡面必定需要type這個(gè)key,這個(gè)案例中type的值設(shè)定成ADD_POINTS_TYPE筷凤,而為了動(dòng)作需要贺辰,這個(gè)物件有時(shí)候會(huì)多帶其他屬性,這邊我們多帶preload這個(gè)key嵌施,並且值為一個(gè)物件{userId:1043551, point:100}饲化。
ADD_POINTS_ACTION被dispatch給reducer後,各個(gè)reducer開(kāi)始看自己有沒(méi)有針對(duì)ADD_POINTS_TYPE做處理吗伤,有的話(huà)就開(kāi)始動(dòng)作吃靠。這邊我們r(jià)educer要做的很簡(jiǎn)單,就是將store裡面足淆,是1043511這個(gè)userId的資料進(jìn)行更新巢块,將他的點(diǎn)數(shù)增加100。
store更新完以後巧号,通知頁(yè)面store裡面的user資料更新了族奢,而原先的頁(yè)面是有註冊(cè)這個(gè)store,因此就重新Render丹鸿。
簡(jiǎn)短程式碼
這邊的程式碼除了用Redux越走,也用了React-Redux讓Redux跟React之間更好銜接,算是一種把View跟Store接的更好的一個(gè)解法。
--未完待續(xù)
當(dāng)然自己想純用Redux完成整個(gè)流程是可以的廊敌,不過(guò)這邊是基本介紹就不多做示範(fàn)铜跑。