首先講這兩個東西的共通點: 能夠解決 props drilling 的問題,可以不用將 props 在多層父子元件間層層傳遞。
但 Redux 我認為它有不斷的在進化改版,甚至衍生出許多的工具去解決它的缺點,例如 Redux toolkit 解決 Redux 要重複寫類似 actions、action types、reducers 等十分像模板的程式碼,Redux toolkit package 也提供了 RTK Query 這個 data fetching 工具,例如用 RTK Query 呼叫 api 後回傳的資料可以自動生成 state 存在 store,所以也適合搭配在一起使用。
useContext 功能單純,可以搭配 useReducer 使用,但這樣又會有兩個狀況,第一是 context provider 包覆底下的子元件只要 context 管理的 state 有改變,底下的元件都會重新渲染,二是你要寫邏輯複雜點的程式去更新 state 就會寫很多類似的模板程式碼,舉 reducer 你常會看到類似這樣的寫法:
function reducer(state, action) {
switch (action.type) {
case "increment":
return { count: state.count + 1 };
case "decrement":
return { count: state.count - 1 };
case "reset":
return { count: (state.count = 0) };
default:
return { count: state.count };
}
}
所以我認為 context 無法取代 redux,而是應該順應它的特性,舉例有關於網站主題樣式的 golbal state 就適合存在 context,因為更新主題樣式相關的 state 時(例如顏色、字形),利用 context 底下的元件都會重新渲染的特性,就可以一併更新整個網站各元件的樣式。
React 官網就是使用主題樣式當作 global state 去示範怎麼使用 useContext 的,你可以參考看看。
https://react.dev/reference/react/useContext