fbpx

NgRx(採用 NgRx 資料)- 完整指南(Angular 15)

了解現代 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 ToolsNgRx Router Store 和時間旅行調試器( time-travelling debugger )。

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

目錄

本課程涵蓋以下主題:

  • 狀態管理介紹
  • 詳細的 Store 架構
  • NgRx 關鍵概念
  • Actions 與 Action Creators
  • Reducers
  • NgRx Effects
  • 選擇器
  • 向 NgRx 應用程式添加身份驗證
  • NgRx Entity 與此實體格式
  • NgRx DevTools
  • NgRx 時間旅行調節器 ( Time Travelling Debugger )
  • NgRx 運行時間檢查和 Store 不變性
  • NgRx  Router Store
  • NgRx Data 和實體狀態管理
  • NgRx 最佳實踐

您將在本課程中學到什麼?

在本課程結束時,您將對狀態管理的概念和一般的集中式儲存( store )解決方案感到滿意。

您將使用簡單的方法使用 NgRx 輕鬆設計新應用程式,並且您將深入了解完整的 Ngrx 程式庫( library )生態系統:包括 Ngrx Store、Effects、Entity 和 NgRx Data 程式庫。

您將了解如何使用 Ngrx Schematics 快速構建部分解決方案,以及如何從頭開始設置 Ngrx DevTools,包括路由器整合。

目標受眾

希望深入了解現代 NgRx 生態系統的 Angular 開發人員,包括 Ngrx Store、Effects、Router Store、Ngrx Entity、DevTools 和 Schematics!

講師簡介

Angular University 最暢銷的 Angular 課程 | 10 萬多名學生 | 16門課程

大家好,我是 Vasco Cavalheiro,是 Angular University 的線上講師。

多年來,我已經幫助超過 10 萬名開發人員學習了 Angular 框架及其周圍的技術生態系統。

在右上角的鏈接部分查看我的 Linkedin。

關於 Angular University:

Angular University 的目標是成為您學習和跟上整個 Angular 生態系統的地方。我們提供優質的視訊教程,螢幕操作風格。

無論您是 Angular 的初級、中級還是高級,我們都有幾門課程適合您。

更多關於我:

我是一名擁有多年經驗的軟體開發人員,非常擅長使用 Angular 建構用戶界面。多年來,我一直在各種企業項目中擔任前端開發人員/架構師。

我從事過大量專案,從幫助建構歐洲犯罪記錄資訊交換系統的單頁應用程式,到全新的電子銀行門戶,再到企業銀行門戶,等等。我一直是內部框架團隊的重要成員,該團隊為數十名開發人員的內部部門建構框架。

我也喜歡教授、寫作和談論技術。我期待成為您的 Angular 講師,

親切的問候,

Vasco

英文字幕:有

  • 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To

🙌 如何有效率地管理 ChatGPT 輸出與整理自己的 ChatGPT 提示( prompts )使用情境?LN+ for Web 已經針對 ChatGPT 的整合做最佳化

🙌 讓 Notion AI 成為你線上學習的得力助手,詳細操作請參考 – 使用 Notion AI 功能來為 udemy 的課程做摘要總結


  • 點選這個✨優惠連結 ,課程最低價 NT390 起⚡️( 如看不到請清 Udemy Cookies 或用無痕模式 )
  • 領導力課程 NT370 起特價連結 
  • Udemy 現在越來越多課程有中文字幕,請參考 Soft & Share 中文線上課程
  • 手機上點選優惠連結看到的價格有可能比電腦上看到的貴
  • 點選”報名參加課程”有時會轉久一點或回報無法連上,請稍等或重新點選就會出現

報名參加課程

Sponsored by Udemy


也許你會有興趣

不受 FB 演算法影響,歡迎透過 e-mail 訂閱網站更新

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: