NgRx（採用 NgRx 資料）- 完整指南（Angular 15）

Contents

了解現代 NgRx 生態系統，包括 NgRx Data、Store、Effects、Router Store、NgRx Entity 和 DevTools

從這 6 小時的課程，你會學到

Github 貯存庫中的程式碼，每個部分都有可下載的 ZIP 檔
熟悉集中儲存模式，以及如何在 Angular 中使用它
了解何時使用集中式 Store (儲存) 解決方案以及原因
了解如何使用 NgRx Data 以最少的程式碼處理實體資料( entity data )
深度地學習 NgRx Store，詳細了解所有核心儲存模式，包括 Reducers 和 Actions
詳細了解 NgRx Effects，了解何時使用副作用
詳細了解 NgRx Entity，何時使用以及為什麼使用，了解有哪些好處
逐步轉換現有的 Angular 普通應用程式，並將其轉變為基於 Store (儲存)的應用程式
學習在 NgRx 中實現常見功能，例如身份驗證或實體分頁
通過實施真實用例，以有趣且實用的方式深入學習 NgRx

要求

只需有點 Angular 和 Typescript

課程說明

本課程是新 NgRx 生態系統的完整指南，包括 NgRx Data、Store、Effects、Router Store、NgRx Entity 和 DevTools，並附帶一個正在運行的 Github repo

本課程簡而言之

當涉及到前端架構設計選擇時，狀態管理是第一個要了解的主題。為什麼選擇在單頁應用程式( SPA，single page application )中進行狀態管理，什麼時候做，為什麼，有什麼好處，有什麼權衡？

這些都是我們將在本課程中解決的關鍵問題，我們將提供 NgRx 生態系統的擴展導覽。

Angular 領域最流行的狀態管理程式庫( state management library )是 NgRx，這是有充分理由的。 NgRx 的最新版本可能是最近整個 Angular 生態系統中最重要的版本之一。 儘管向後相容，但它包含如此多的新功能，幾乎可以說是一個全新的狀態管理程式庫。

在幕後，Actions、Reducers、Effects、Entities 和 Selectors 的核心概念保持不變，但我們現在擁有一個全新的 API，用於以更簡潔的方式管理這些概念。此外，我們還包含了 NgRx Data，這是一種管理實體資料的全新且非常強大的方法。

實際上，NgRx Data 是 NgRx 之上的一個強大的抽象層，它允許我們為應用程式的大部分添加狀態管理，而無需編寫太多程式碼！

課程大綱

在本課程中，我們將採用一個在沒有任何狀態管理的情況下構建的小型現有應用程式。我們將通過識別應用程式在其初始形式中存在的一些問題來了解不進行狀態管理的後果。

然後我們就要開始重構應用了，我們要一步步給應用多螢幕添加狀態管理。我們將從應用程式的身份驗證功能開始，然後將繼續進行實體資料管理部分。

我們將詳細解釋 NgRx 的所有關鍵概念：Actions、Reducers、Effects 和 Selectors，並詳細說明 Store 架構本身，了解其優勢。

在整個課程中，我們將逐步介紹並詳細解釋 NgRx Store 模組、NgRx Effects，且深入介紹 NgRx Entity(實體) 和實體格式，我們將安裝並導覽 NgRx Dev Tools、NgRx Router Store 和時間旅行調試器( time-travelling debugger )。

我們還將學習如何充分利用 NgRx Data，並學習如何對其進行客製化，以便使用最少的應用程式程式碼來管理實體資料。我們將涵蓋 NgRx，同時將如良好的 Action hygiene (衛生)等最佳實踐牢記於心。

本課程涵蓋以下主題：