跳至主要內容

教學總覽

Redux 核心文件網站 https://redux.dev.org.tw 包含學習 Redux 的主要教學,包括如何同時使用 Redux Toolkit 和 React-Redux。

提示

為了避免 Redux 核心文件和 Redux Toolkit 文件之間重複說明,我們專注於讓 Redux 核心文件教學更全面,並指向它們,而不是在 Redux Toolkit 文件中提供延伸教學。

請參閱這些連結教學,以了解如何有效使用 Redux Toolkit。

Redux Toolkit 快速入門

Redux Toolkit 快速入門教學簡要說明如何在 React 應用程式中新增和使用 Redux Toolkit。

如果您只想了解執行基本範例的最快方法,請閱讀快速入門教學。

我們還有一個TypeScript 快速入門教學,簡要說明如何設定並將 TypeScript 與 Redux Toolkit 和 React-Redux 搭配使用。

如果您使用 Next.js,我們有一個專門說明如何將 Redux Toolkit 與 Next.js 搭配使用的教學Next.js 教學

Redux 精華:真實世界範例

Redux 精華教學教導您「如何正確使用 Redux」,並使用 Redux Toolkit 作為撰寫 Redux 邏輯的標準方法。

它說明如何建立「真實世界」風格的範例應用程式,並在過程中教授 Redux 概念。

如果您從未使用過 Redux,只想了解「我該如何使用它來建立有用的東西?」,請從 Redux 精華教學開始。

Redux 基礎:從頭認識 Redux

Redux 基礎教學透過說明如何手動撰寫 Redux 程式碼以及為何存在標準使用模式,教導「Redux 如何運作,從頭開始」。然後它說明 Redux Toolkit 如何簡化這些 Redux 使用模式。

由於 Redux Toolkit 是包覆 Redux 核心的一個抽象層,因此了解 RTK 的 API 實際上在幕後為您執行了哪些動作會很有幫助。如果您想了解 Redux 的實際運作方式以及為何 RTK 是建議的方法,請閱讀 Redux 基礎教學。

學習現代 Redux 直播

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

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

使用 Redux Toolkit

RTK 使用指南文件頁面說明每個 RTK API 的標準使用模式。API 參考區段描述每個 API 函式,並提供其他使用範例。

Redux Essentials 教程 也展示了在構建應用程式時如何使用每個 API。

RTK Query 影片課程

如果你偏好影片課程,你可以 在 Egghead 免費觀看 Lenz Weber-Tronic(RTK Query 的創建者)的 RTK Query 影片課程,或在此處查看第一課

將純粹 Redux 移轉到 Redux Toolkit

如果你已經了解 Redux,只想了解如何將現有應用程式移轉為使用 Redux Toolkit,那麼 Redux Fundamentals 教程中的「使用 Redux Toolkit 的現代 Redux」頁面 會說明 RTK 的 API 如何簡化 Redux 使用模式,以及如何處理該移轉。

將 Redux Toolkit 與 TypeScript 搭配使用

RTK 文件中的 與 TypeScript 搭配使用 頁面說明了使用 TypeScript 和 React 設定 Redux Toolkit 的基本模式,並記錄了每個 RTK API 的特定 TS 模式。

此外, Create-React-App 的 Redux + TS 範本 已經設定 RTK 使用這些 TS 模式,並作為這項功能運作方式的良好範例。

過時的 Redux Toolkit 教程

我們之前在 Redux Toolkit 文件中有一組「基礎/中級/進階」教程。它們很有幫助,但我們已將它們移除,並改為指向 Redux 核心文件中的「Essentials」和「Fundamentals」教程。

如果你想瀏覽舊教程,可以在我們儲存庫的歷程記錄中查看內容檔案

Redux Toolkit 儲存庫:過時的「基礎/中級/進階」教程檔案