Redux編程 教學課程

上門編程教學課程內容

課程簡介

本課程專為希望快速掌握 Redux 狀態管理框架 的學員設計，三小時內全面學會 Redux 的核心概念、資料流設計及與 React 整合的應用實務。

Redux 是 JavaScript 應用中最廣泛使用的 全域狀態管理庫（State Management Library），適用於 React、Vue、Angular 或純 JavaScript 專案，能協助開發者清楚管理跨元件共享的資料。
課程以 React 為主要示範環境，從理論到實作一步步說明 Action、Reducer、Store 的邏輯關係，並導入 Redux Toolkit（RTK） 的現代化語法，讓學員能快速上手並實戰運用在中小型應用程式中。

 

適合對象：

• 具備 React.js 基礎的前端工程師

• 想理解狀態管理方式與全域資料流的開發者

• 曾經在專案中遇到資料狀態混亂、需要集中式管理的程式設計師

• 想升級 React 技能、學習現代化 Redux Toolkit 的學員

學習成果：

• 理解 Redux 的設計理念與單向資料流架構

• 能操作 Action、Reducer、Store 的建立與資料傳遞

• 熟悉 Redux Toolkit 並掌握 Slice 的建立流程

• 能在 React 專案中整合 Redux 並管理全域狀態

• 具備應用於實際 SPA （Single Page Application）的能力

---

 

課程時長

3 小時（180 分鐘）
理論講解與實作練習比例約 3 : 7

---

 

課程大綱

第一部份：Redux 概論與架構原理（30 分鐘）

• 為何需要 Redux：解決資料傳遞與狀態混亂問題

• Redux 三大原則（Single Source of Truth、State is Read-only、Pure Function Updates）

• Redux 架構：Store、Action、Reducer、Dispatch

• Redux vs Context API 比較

• 實作：利用純 JavaScript 實現最簡版 Redux 流程

---

第二部份：建立 Redux 專案基礎（40 分鐘）

• 使用 create-react-app 或 Vite 建立 React 專案

• 安裝 Redux Toolkit 與 React-Redux

• 建立 Store 與 Provider 設定

• action 與 reducer 的邏輯關係

• 實作練習：建立「計數器（Counter）」應用

---

第三部份：Redux Toolkit 實作（40 分鐘）

• configureStore() 與 createSlice() 語法解析

• 定義初始狀態（initialState）與 reducer 方法

• 建立 Action 與 Dispatch 用法

• 取得狀態資料：useSelector()、useDispatch() Hooks

• 實作範例：多元件共享狀態（登入狀態管理 / 購物車數據共享）

---

第四部份：中階應用與資料流整合（40 分鐘）

• 非同步操作（Async Action）與 createAsyncThunk() 應用

• 串接外部 API 並更新狀態

• 拆分多個 Slice 與模組化資料管理

• Redux DevTools 使用與除錯技巧

• 實作練習：串接 API 建立「即時商品清單」管理

---

第五部份：最佳實務與延伸應用（30 分鐘）

• Redux vs Zustand / Recoil / MobX 差異概述

• 狀態重設（Reset State）與模組整合技巧

• Redux 結合 Persist 儲存狀態（localStorage 保存登入資料）

• 延伸應用：React Query / RTK Query 結合 API 最佳化

• 綜合實作：整合多元 Slice 的小型應用範例（會員中心 Dashboard）

---

 

課程特色

• 三小時快速掌握 Redux 與 Redux Toolkit 的實務核心概念。

• 以 React 為應用場景，強化前端架構理解與資料流控制。

• 理論 × 實作並重，從簡單範例到模組化管理全面涵蓋。

• 打下前端架構工程化基礎，適合進階 React 與全端開發者。