過年期間,除了吃飯打牌以外,似乎還是要來點正經的。趁著還沒糜爛致死的早晨,來打這一篇React-Redux的簡單筆記。
最近專案正用React-Redux重構某個服務,順勢就用這個當主題寫點筆記。
Redux流程簡介
React這邊就先不贅述,直接從Redux的概念說起。
下圖是Redux的基本流程概念:
使用者從頁面上(View)執行任何頁面上的event時,會將一個action給dispatch(把他當成一個會把action丟出去給reducer的函式)出去。
而action定義了這個action的形態(type)和一些資料,來到reducer階段時,就會遍佈查詢有沒有針對這個type所做應對的處理,這個處理就會將action的資料與原來的store產生更新。
依據更新的內容,會再向有對這個store改變內容做訂閱的View發出更新訊號,View這時候就會再依照狀況進行re-render。
代個實際的小案例,如果已經理解可以跳過這段。
現在有個頁面如下:
使用者點擊加點按鈕,利用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完成整個流程是可以的,不過這邊是基本介紹就不多做示範。