這篇主要會講述 Redux 的一些介紹,下篇才會開始進行實作。
Redux 是專門管理 state 的函式庫,它可以將整個專案的 state,儲存在一個樹狀物件並放在唯一的 store 裡面。
方便管理 state。沒有使用 Redux 的話,我們要透過元件將 state 透過 props 進行傳遞,多層元件的話會很複雜,如果有 Redux 就可以將 state 集中管理,有需要時再從 store 傳遞給元件。
第二是單向數據流,Redux 在更新 state 時使用的是 Functional Programming 中純函式的概念去做更新,這樣 state 的變化比較好追蹤,也就利於測試 & debug。
另外透過 Redux 也可以將操作元件 state 的邏輯部分從元件抽離出來,達到元件做純渲染,Redux 處理資料邏輯的結果。
圖片來源: Redux 官網
當某個事件發生時,會建立一個 JS 物件,該物件即為 action。
action 裡面有 type 和 payload 屬性,一定要有 type 屬性,payload 則非必要,分別描述了行為的類型和要傳遞的 state。
將 action 傳遞到 reducer 函式。
reducer 是一個 pure function,它會取得先前的 state 和一個 action,並根據傳入的 action 的 type 去將 state 值做改變,最後回傳的是一個經過計算後新的 state 物件。
另外在一個專案中可以有多個 reducer,每一個都管理它所擁有的全域 state 一部分。
以下的方式能正確的對陣列和物件進行變更:
如附圖,淡綠色的框框是正確修正 state 的方式,共通點是利用回傳新的陣列/物件來修正 state,其中物件的屬性移除最好用_.omit
方法,而不是其上面的方式,因為會產生空的鍵值對(例如{ name: undefined }
)
reducer 回傳後的 state 放在這邊做管理,讓由 react 或其他語言製成的應用程式可以取用。
這個段落紀錄 Redux 官網 Redux Style Guide 的部分內容,告訴讀者怎麼樣寫 Redux 會是比較好的做法,總共分三種重要等級: 必要、強烈推薦、推薦,以下會分別介紹。
import usersReducer from 'features/users/usersSlice'
import postsReducer from 'features/posts/postsSlice'
const rootReducer = combineReducers({
// usersReducer, // 不推薦
users: usersReducer,
posts: postsReducer
})
domain/eventName
格式寫 action type這和 redux 在做 state 更新的對比機制有關,redux 做的是去確認更新前後兩個 state 的 reference 是否相同,而不是一層層屬性的去比對兩個物件型別的每個屬性值是否相同。
這麼做的原因是和效能有關,比對兩個物件的 reference 是否相同,會比較單純且快速,並且在 reducers 裡面使用 pure function 更新 state 減少 side effect,可以幫助我們更好 debug 避免更新到不對的值。
在對 Redux 有初步的認識後,明天將會實作一個範例。