跳至主要內容

為何使用 React Redux?

Redux 本身是一個獨立的函式庫,可以使用於任何 UI 圖層或架構,包括 React、Angular、Vue、Ember 及原生 JS。儘管 Redux 和 React 常搭配使用,但它們彼此獨立。

如果您在任何一種 UI 架構中使用 Redux,您通常會使用「UI 繫結」函式庫將 Redux 與 UI 架構繫結在一起,而不是直接從 UI 程式碼與 store 進行互動。

React Redux 是適用於 React 的官方 Redux UI 繫結函式庫。如果您同時使用 Redux 和 React,您也應該使用 React Redux 將這兩個函式庫繫結在一起。

要了解為何您應該使用 React Redux,或許有助於了解「UI 繫結函式庫」會做些什麼。

資訊

如果您有疑問,是否一般性地使用 Redux,請參閱這些文章,以了解您可能想要使用 Redux 的時機和原因,以及其預期的使用方式。

在 UI 中整合 Redux

要搭配 任何 UI 層使用 Redux,都需要執行 一套一致的步驟

  1. 建立 Redux 儲存庫
  2. 訂閱更新
  3. 在訂閱回呼中
    1. 取得目前的儲存庫狀態
    2. 針對此 UI 區段,擷取必要的資料
    3. 使用資料更新 UI
  4. 如有需要,以下列初始狀態呈現 UI
  5. 透過發送 Redux 動作,回應 UI 輸入

雖然可以手動撰寫此邏輯,但這會非常重複。此外,UI 效能最佳化需要複雜的邏輯。

訂閱儲存庫、檢查更新的資料和觸發重新呈現的程序可以變得更通用且可重複使用。類似 React Redux 的 UI 繫結程式庫,可以處理儲存庫互動邏輯,因此您不必親自撰寫程式碼。

資訊

若要深入了解 React Redux 的內部運作方式,以及它如何為您處理儲存庫互動,請參閱慣用的 Redux:React Redux 的歷史和實作

使用 React Redux 的理由

它是 React 的官方 Redux UI 繫結

雖然 Redux 可與任何 UI 層搭配使用,但它最初的設計和用途,是為了與 React 一起使用。其他許多架構都有 UI 繫結層,但 React Redux 是由 Redux 團隊直接維護的。

作為 React 的官方 Redux 繫結,React Redux 會針對兩個程式庫的任何 API 變更保持最新狀態,以確保您的 React 組件如預期般運作。其預期的用途,採用了 React 的設計原則,撰寫宣告式組件。

它為您實作效能最佳化

React 通常很快,但是預設情形下,對元件的任何更新,React 都會重新繪製元件樹中該部分內的所有元件。這確實需要工作,而且如果特定元件的資料沒有改變,那麼重新繪製很有可能是浪費力氣,因為請求的 UI 輸出會是一樣的。

如果擔心效能,提升效能的最佳方法就是略過不必要的重新繪製,這樣元件只會在資料實際變更時才重新繪製。React Redux 在內部實作了許多效能最佳化,因此你自己的元件只會在確實需要時才重新繪製。

此外,透過在 React 元件樹中連接多個元件,你可以確保每個已連線元件只會從儲存狀態中萃取出該元件需要的特定資料片段。這表示你的元件比較不需要重新繪製,因為這些特定資料片段大多數時候並未變更。

社群支援

身為 React 和 Redux 的官方繫結函式庫,React Redux 擁有龐大的使用者社群。這讓你更容易發問求助、認識最佳實務、使用建立在 React Redux 上的函式庫,以及在不同應用程式間重複使用你的知識。

了解 React Redux

社群資源