過年期間，除了吃飯打牌以外，似乎還是要來點正經的。趁著還沒糜爛致死的早晨，來打這一篇React-Redux的簡單筆記。
最近專案正用React-Redux重構某個服務，順勢就用這個當主題寫點筆記。
Redux流程簡介
React這邊就先不贅述，直接從Redux的概念說起。
下圖是Redux的基本流程概念：
Redux流程圖
使用者從頁面上(View)執行任何頁面上的event時，會將一個action給dispatch（把他當成一個會把action丟出去給reducer的函式）出去。
而action定義了這個action的形態(type)和一些資料，來到reducer階段時，就會遍佈查詢有沒有針對這個type所做應對的處理，這個處理就會將action的資料與原來的store產生更新。
依據更新的內容，會再向有對這個store改變內容做訂閱的View發出更新訊號，View這時候就會再依照狀況進行re-render。
代個實際的小案例，如果已經理解可以跳過這段。
現在有個頁面如下：
頁面圖示(三個值分別是id 姓名 點數)
使用者點擊加點按鈕，利用dispatch，發出一個加點的action，稱作ADD_POINTS_ACTION，這個action實際是一個function，會回傳一個物件裡面必定需要type這個key，這個案例中type的值設定成ADD_POINTS_TYPE，而為了動作需要，這個物件有時候會多帶其他屬性，這邊我們多帶preload這個key，並且值為一個物件{userId:1043551, point:100}。
ADD_POINTS_ACTION被dispatch給reducer後，各個reducer開始看自己有沒有針對ADD_POINTS_TYPE做處理，有的話就開始動作。這邊我們reducer要做的很簡單，就是將store裡面，是1043511這個userId的資料進行更新，將他的點數增加100。
store更新完以後，通知頁面store裡面的user資料更新了，而原先的頁面是有註冊這個store，因此就重新Render。
範例結果
簡短程式碼
這邊的程式碼除了用Redux，也用了React-Redux讓Redux跟React之間更好銜接，算是一種把View跟Store接的更好的一個解法。
--未完待續
當然自己想純用Redux完成整個流程是可以的，不過這邊是基本介紹就不多做示範。
网友评论