iT邦幫忙

0

[歡迎討論] context vs redux

  • 分享至 

  • xImage

想問前端的大家在公司專案中,都是使用 context 還是 redux 做狀態的管理?考量的點又是什麼?

如果有其他管理方式也歡迎在下方留言

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
harry xie
iT邦研究生 1 級 ‧ 2023-10-02 10:47:49

首先講這兩個東西的共通點: 能夠解決 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

janlin002 iT邦好手 1 級 ‧ 2023-10-02 11:01:49 檢舉

首先感謝你的回覆~
不過針對 useContext 的部分,我有幾點想要說:

  1. context 如果是搭配 children 的話,其實也不會造成同 provider 下的資料,會被其他人的變化而導致重新渲染
  2. 目前專案的 context 很單純,就是針對功能來做區分,且context 基本上只做資料的存取,不太會將邏輯的部分放在context中去處理,所以感覺跟redux並沒有太大差異

比較想知道的是網路上很多文章都說 context 不適合大專案,但要到多大的專案才能算大專案,並且會有什麼樣的問題?

我要發表回答

立即登入回答