課程：Redux 思維與 RTK 核心 第 1 堂：Redux 思維建立
00課程路線圖
歡迎來到這趟 Redux Toolkit（RTK）的學習旅程。在我們正式動手寫下第一行程式碼之前，我希望先為你展示一張完整的地圖。
參加 IT 鐵人賽就像是一場技術馬拉松，要在 30 天內持續產出有品質的技術文章，最忌諱的就是「走一步算一步」。如果你沒有一個清晰的學習結構，很容易在第 10 天左右就遇到題材枯竭，或者發現前面的文章與後面的內容邏輯斷層。這份課程規劃，就是為了讓你不僅能學好 RTK，還能順利產出前 10 到 12 篇結構紮實、內容連貫的系列文章，為你的 30 天挑戰打下最穩固的基礎。
學習地圖：六大核心主題的連結邏輯
我們的學習路徑並非隨機挑選，而是遵循著從「建立直覺」到「工具掌握」，再到「實作整合」的認知規律。這六大主題環環相扣，構成了一個完整的知識體系：
1. Redux 核心概念與思維模型：建立「為什麼」
很多開發者直接跳入 API 的使用，卻在遇到複雜邏輯時感到迷惘。這部分的重點在於思維轉換。我們會探討 React 在處理跨元件狀態時的天然限制（如 Props Drilling），並理解 Redux 如何透過「單向資料流」與「三大原則」來解決這些問題。這不是枯燥的理論，而是讓你理解為什麼 Redux 選擇了現在的設計方式。
2. 環境建置與 RTK 初始設定：工具的整合
有了思維，下一步是建立實驗室。我們會使用現代前端最主流的 Vite 搭配 TypeScript 建立環境。在這裡，你會學到如何正確安裝 @reduxjs/toolkit 與 react-redux，並完成最核心的 configureStore 設定。這部分是所有實作的起點。
3. createSlice 深入解析：掌握 RTK 的核心
createSlice 是 RTK 畫時代的 API。我們會深入探討它如何自動生成 Action 與 Reducer，並拆解內建的 Immer 庫如何讓你用「看似修改狀態」的方式完成「不可變（Immutable）」的更新。這是你寫出優雅程式碼的關鍵。
4. 在 React 元件中使用 Redux：連結 UI 與狀態
定義好 Store 後，如何讓 UI 與之溝通？我們會學習 useSelector 與 useDispatch。更重要的是，我們會建立型別安全的開發模式，教你如何導出 RootState 與 AppDispatch，確保你在開發時能享有完整的 TypeScript 自動補全與靜態檢查。
5. 多個 Slice 的組合與管理：邁向真實應用
真實的專案不會只有一個計數器。我們會學習如何組合多個 Slice，並探討 Selector 的設計模式（Colocate Pattern）。透過一個整合了 Counter 與 Todo List 的範例，讓你理解如何在複雜應用中維持資料流的清晰。
6. 綜合複習與文章撰寫實戰：內化與輸出
最後，我們會將前面的零散知識串聯起來，並提供具體的寫作建議。這是一個回顧與昇華的階段，確保你能將所學轉化為高品質的教學內容。
鐵人賽前 10–12 篇的規劃邏輯
作為一名鐵人賽的參賽者，你最擔心的可能是「標題要怎麼下」以及「每一篇的內容會不會太少或太多」。這套課程已經為你設計好了對應的文章節奏。
在前 12 天中，你可以依照下列邏輯來分配你的文章主題，每一階段的學習成果都能獨立成文，且具備明確的知識點：
| 篇號區間 | 主題範疇 | 文章產出重點 |
|---|---|---|
| 第 1-3 篇 | Redux 思維篇 | 解釋狀態管理的痛點、Redux 三大原則的哲學意義，以及 Redux 資料流圖解。 |
| 第 4-5 篇 | 環境建置篇 | 實作 Vite + TS 的配置，介紹 configureStore 與 Provider 的設定。 |
| 第 6-8 篇 | createSlice 深度解析 | 專注於 createSlice 的語法、Immer 的運作原理，以及如何與 TypeScript 介面整合。 |
| 第 9-10 篇 | React Hooks 實戰 | 介紹型別安全的 useAppSelector 與 useAppDispatch，並完成第一個完整的 Counter 元件。 |
| 第 11-12 篇 | 多 Slice 組合管理 | 示範如何新增第二個 Slice（如 Todo），並討論如何設計良好的 Selector 函數。 |
這樣的規劃能確保你的文章從「觀念」出發，中間經過「工具設定」，最後落腳於「實際應用」。對於讀者來說，這是一系列循序漸進的教學；對於你來說，這是一條條理清晰的成長曲線。
「理論 + 實作」的文章架構：你的寫作模板
為了讓你的鐵人賽文章具有專業感與教學價值，我建議每一篇文章都採用固定的結構。這種方式能減少你寫作時的「阻力」，讓讀者更容易吸收。
1. 理論部分：解釋「為什麼」與「核心原理」
不要一上來就貼程式碼。先問一個問題，或是描述一個情境。
- 引導思考： 「我們為什麼需要這個 API？」、「如果沒有它，我們會遇到什麼麻煩？」
- 預測與揭曉： 讓讀者先預測某個行為，再揭曉 Redux 是如何處理的。例如：在講到 Immer 時，先問「如果我們直接修改 state 的屬性，React 會重新渲染嗎？」，然後再解釋 Immer 的 Draft 機制。
- 核心概念： 深入淺出地解釋術語，使用比喻或簡單的邏輯推導。
2. 實作部分：TypeScript 範例與 DevTools 觀察
這是文章的靈魂，也是你作為進階開發者的實力體現。
- TypeScript 為核心： 所有的程式碼範例都必須包含型別定義。不要只寫
any，而是要定義interface或type。這能展現你對程式碼嚴謹性的追求。 - 小而精悍的範例： 每篇文章的範例應該是獨立且可執行的。我們不推薦跨越 10 篇的大型專案，因為讀者如果不小心漏看一篇，後面就接不上了。簡單的 Counter 或 Todo 範例反而能讓讀者專注在當前的技術點上。
- 視覺化驗證： 強調 Redux DevTools 的重要性。在實作完一個功能後，截一張 DevTools 的圖，展示 Action 是如何發送的、State 是如何變化的。這能幫助讀者建立「直覺」，而不僅僅是看程式碼跑通而已。
為什麼這套規劃適合你？
你是一位有經驗的 React 開發者，你追求的不只是「會用」，而是「懂為什麼用」。
這套路線圖放棄了舊時代 Redux 那種繁瑣、令人卻步的教學方式（例如先教三種不同的 Action 定義方式），而是直接採用 Redux Toolkit 官方推薦的現代寫法。我們會把重點放在 TypeScript 的型別推導與開發體驗上。
這不僅是為了通過 30 天的挑戰，更是為了讓你在未來的職場或專案中，能夠有自信地設計出可維護、可擴展的狀態管理架構。
小結與銜接
這份課程路線圖是你接下來兩週的指引。我們從整體的 6 大主題出發，對應到鐵人賽前 12 篇的文章規劃，並確立了「理論 + 實作」的產出標準。
有了地圖，我們就可以踏出第一步了。在下一部分，我們將回到開發者的日常痛點：為什麼我們需要狀態管理？ 我們將剖析 React 內建機制的侷限性，找出 Redux 存在的真正價值。