過年期間，除了吃飯打牌以外，似乎還是要來點正經(jīng)的。趁著還沒糜爛致死的早晨，來打這一篇React-Redux的簡單筆記。
最近專案正用React-Redux重構(gòu)某個服務(wù)，順勢就用這個當(dāng)主題寫點筆記。

Redux流程簡介

React這邊就先不贅述，直接從Redux的概念說起。
下圖是Redux的基本流程概念：

Redux流程圖

使用者從頁面上(View)執(zhí)行任何頁面上的event時，會將一個action給dispatch（把他當(dāng)成一個會把action丟出去給reducer的函式）出去。
而action定義了這個action的形態(tài)(type)和一些資料，來到reducer階段時，就會遍佈查詢有沒有針對這個type所做應(yīng)對的處理，這個處理就會將action的資料與原來的store產(chǎn)生更新。
依據(jù)更新的內(nèi)容，會再向有對這個store改變內(nèi)容做訂閱的View發(fā)出更新訊號，View這時候就會再依照狀況進行re-render。

代個實際的小案例，如果已經(jīng)理解可以跳過這段。
現(xiàn)在有個頁面如下：

頁面圖示(三個值分別是id 姓名 點數(shù))

使用者點擊加點按鈕，利用dispatch，發(fā)出一個加點的action，稱作ADD_POINTS_ACTION，這個action實際是一個function，會回傳一個物件裡面必定需要type這個key，這個案例中type的值設(shè)定成ADD_POINTS_TYPE，而為了動作需要，這個物件有時候會多帶其他屬性，這邊我們多帶preload這個key，並且值為一個物件{userId:1043551, point:100}。
ADD_POINTS_ACTION被dispatch給reducer後，各個reducer開始看自己有沒有針對ADD_POINTS_TYPE做處理，有的話就開始動作。這邊我們reducer要做的很簡單，就是將store裡面，是1043511這個userId的資料進行更新，將他的點數(shù)增加100。
store更新完以後，通知頁面store裡面的user資料更新了，而原先的頁面是有註冊這個store，因此就重新Render。

範(fàn)例結(jié)果

簡短程式碼

這邊的程式碼除了用Redux，也用了React-Redux讓Redux跟React之間更好銜接，算是一種把View跟Store接的更好的一個解法。

--未完待續(xù)

當(dāng)然自己想純用Redux完成整個流程是可以的，不過這邊是基本介紹就不多做示範(fàn)。