跳到主要內容

Redux Toolkit 入門

目的​

Redux Toolkit 套件旨在成為撰寫 Redux 邏輯的標準方式。它最初是為了協助解決關於 Redux 的三個常見疑慮而建立的

  • 「設定 Redux 儲存庫太複雜了」
  • 「我必須新增許多套件才能讓 Redux 執行任何有用的功能」
  • 「Redux 需要太多樣板程式碼」

我們無法解決每個使用案例，但秉持 create-react-app 的精神，我們可以嘗試提供一些工具來抽象設定程序並處理最常見的使用案例，以及包含一些實用的公用程式，讓使用者可以簡化其應用程式程式碼。

Redux Toolkit 也包含一個強大的資料擷取和快取功能，我們稱之為 "RTK Query"。它以一組獨立的進入點包含在套件中。它是可選的，但可以消除親自撰寫資料擷取邏輯的需求。

這些工具對所有 Redux 使用者都應該有幫助。無論你是剛開始使用 Redux 的新使用者，正在設定你的第一個專案，還是有經驗的使用者，想要簡化現有的應用程式，Redux Toolkit 都可以幫助你改善你的 Redux 程式碼。

安裝​

建立一個 React Redux 應用程式​

使用 React 和 Redux Toolkit 開始新的應用程式的建議方法是使用 我們針對 Vite 的官方 Redux Toolkit + TS 範本，或使用 Next 的 with-redux 範本 建立一個新的 Next.js 專案。

這兩個範本都已經為該建置工具適當地設定了 Redux Toolkit 和 React-Redux，並附帶一個小型範例應用程式，展示如何使用 Redux Toolkit 的多項功能。

# Vite with our Redux+TS template
# (using the `degit` tool to clone and extract the template)
npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

# Next.js using the `with-redux` template
npx create-next-app --example with-redux my-app

我們目前沒有官方的 React Native 範本，但建議使用這些範本作為標準的 React Native 和 Expo

現有的應用程式​

Redux Toolkit 可作為 NPM 上的套件，供與模組打包器或在 Node 應用程式中使用

npm install @reduxjs/toolkit

如果你需要 React 繫結

npm install react-redux

這個套件包含一個預編譯的 ESM 建置，可以用作 <script type="module"> 標籤，直接在瀏覽器中。

包含的內容​

Redux Toolkit 包含這些 API

  • configureStore()：包裝 createStore 以提供簡化的設定選項和良好的預設值。它可以自動合併你的區塊 reducer，新增你提供的任何 Redux 中介軟體，預設包含 redux-thunk，並啟用 Redux DevTools 擴充功能。
  • createReducer()：讓你提供一個動作類型到案例 reducer 函式的查詢表，而不是撰寫 switch 陳述式。此外，它會自動使用 immer 函式庫，讓你使用正常的變異程式碼撰寫更簡單的不變更新，例如 state.todos[3].completed = true。
  • createAction()：為指定的動作類型字串產生一個動作建立器函式。
  • createSlice()：接受一個 reducer 函式物件、一個區塊名稱和一個初始狀態值，並自動產生一個區塊 reducer，其對應的動作建立器和動作類型。
  • combineSlices()：將多個區塊合併成一個單一的 reducer，並允許在初始化後「延遲載入」區塊。
  • createAsyncThunk：接受動作類型字串和傳回承諾的函數，並根據該承諾產生會派送 pending/fulfilled/rejected 動作類型的 thunk
  • createEntityAdapter：產生一組可重複使用的 reducer 和選取器，用於管理儲存庫中的正規化資料
  • 來自 Reselect 函式庫的 createSelector 工具程式，重新匯出以方便使用。

RTK Query​

RTK Query 作為一個選用附加元件提供在 @reduxjs/toolkit 套件中。它的設計宗旨是解決資料擷取和快取的用例，提供一個精簡但強大的工具組，用於定義應用程式的 API 介面層。它的目的是簡化在 Web 應用程式中載入資料的常見案例，無需親自撰寫資料擷取和快取邏輯。

RTK Query 建構在 Redux Toolkit 核心之上，用於實作，在架構中內部使用 Redux。雖然使用 RTK Query 不需要具備 Redux 和 RTK 的知識，但您應該探索它們提供的其他所有全域儲存管理功能，以及安裝 Redux DevTools 瀏覽器擴充功能，它可以完美地與 RTK Query 搭配使用，用於瀏覽和重播您的要求和快取行為的時間軸。

RTK Query 包含在 Redux Toolkit 核心套件的安裝中。它可透過以下兩個進入點之一取得

import { createApi } from '@reduxjs/toolkit/query'

/* React-specific entry point that automatically generates
   hooks corresponding to the defined endpoints */
import { createApi } from '@reduxjs/toolkit/query/react'

包含內容​

RTK Query 包含這些 API

  • createApi()：RTK Query 功能的核心。它讓您可以定義一組端點，並描述如何從一系列端點擷取資料，包括設定如何擷取和轉換該資料。在多數情況下，您應該在每個應用程式中使用一次，並以「每個基本 URL 一個 API 區段」作為經驗法則。
  • fetchBaseQuery()：一個 fetch 的小包裝，旨在簡化請求。預計作為大多數使用者在 createApi 中使用的建議 baseQuery。
  • <ApiProvider />：如果尚未有 Redux 儲存空間，可以使用為 Provider。
  • setupListeners()：用於啟用 refetchOnMount 和 refetchOnReconnect 行為的工具程式。

請參閱 RTK Query 概觀 頁面，以進一步瞭解 RTK Query 是什麼、它解決了哪些問題以及如何使用它。

學習 Redux​

我們有各種資源可協助您學習 Redux。

Redux Essentials 教學課程​

Redux Essentials 教學課程 是「由上而下」的教學課程，使用我們最新的建議 API 和最佳實務來教授「如何正確使用 Redux」。我們建議從這裡開始。

Redux Fundamentals 教學課程​

Redux Fundamentals 教學課程 是「由下而上」的教學課程，從基本原理和不使用任何抽象化來教授「Redux 如何運作」，以及為何會有標準 Redux 使用模式。

學習現代 Redux 直播​

Redux 維護者 Mark Erikson 出現在「與 Jason 學習」節目中，說明我們建議如何使用 Redux。該節目包含一個現場編碼範例應用程式，展示如何將 Redux Toolkit 和 React-Redux 鉤子與 Typescript 一起使用，以及新的 RTK Query 資料擷取 API。

請參閱 「學習現代 Redux」節目筆記頁面，以取得逐字稿和範例應用程式來源的連結。

協助和討論​

#redux 頻道 的 Reactiflux Discord 社群 是我們官方資源，可解答所有與學習和使用 Redux 相關的問題。Reactiflux 是個很棒的地方，可以閒逛、發問和學習 - 快來加入我們！

您也可以使用 #redux 標籤 在 Stack Overflow 上發問。

最後更新於