過(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)铜跑。
