使用 NgRx 實體簡化您的 Angular 程式碼

夏天，我透過建立一個小應用程式來處理我最喜歡的地方，刷新了我的 NgRx 技能。在此過程中，我很喜歡 NgRx，因為我可以真正控制應用程式的狀態。

造成大量噪音的一件事是為 CRUD 操作定義的選擇器和操作的數量。在我的個人專案中，這並不是太麻煩，但是當我建立一個包含許多切片和部分以及選擇器和化簡器的大型應用程式時，程式碼變得更難維護。

例如，編寫成功、錯誤、更新和刪除的操作以及每個操作的選擇器，增加了複雜性並需要更多測試。

這就是 NgRx 實體 發揮作用的地方。 NgRx 實體 減少樣板程式碼，簡化測試，加快交付時間，並使程式碼庫更易於維護。在本文中，我將引導您使用 NgRx Entities 重構專案中位置的狀態管理，以簡化 CRUD 邏輯。

NgRx 實體是什麼以及為什麼？

在深入研究程式碼之前，讓我們先了解 NgRx 實體 是什麼以及為什麼應該考慮使用它們。

什麼是@NgRx/實體

NgRx 實體 是 NgRx 的擴展，可簡化資料收集的工作。它提供了一組實用程序，可以輕鬆執行從狀態新增、更新和刪除實體以及從儲存中選擇實體等操作。

為什麼我需要遷移到 NgRx 實體？

在為集合建立CRUD操作時，在reducer中手動編寫方法並為每個操作建立重複的選擇器可能是乏味且容易出錯的。 NgRx Entities 減輕了大部分責任，減少了需要編寫和維護的程式碼量。透過最小化樣板程式碼，NgRx Entities 有助於降低技術債務並簡化大型應用程式中的狀態管理。

它是如何運作的？

NgRx Entities 提供了 EntityState、EntityAdapter 和 預定義選擇器 等工具來集合的工作。

實體狀態

EntityState 介面是 NgRx Entities 的核心。它使用兩個關鍵屬性來儲存實體集合：

• ids：實體 ID 陣列。

• entities：字典，其中每個實體都以其 ID 儲存。
  

interface EntityState<V> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}

了解更多關於實體狀態的資訊

實體適配器

EntityAdapter 是使用 createEntityAdapter 函數建立的。它提供了許多用於管理狀態中的實體的幫助器方法，例如新增、更新和刪除實體。此外，您也可以設定實體的識別和排序方式。

interface EntityState<V> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}

EntityAdapter 也讓您定義如何識別實體 (selectId) 以及如何使用 sortComparer 對集合進行排序。

了解更多關於 EntityAdapter 的資訊

現在我們了解了基礎知識，讓我們看看如何使用 NgRx 實體

重構應用程式中地點的狀態管理

設定項目

首先，複製上一篇文章中的儲存庫並切換到具有基本 CRUD 設定的分支：

export const adapter: EntityAdapter<Place> = createEntityAdapter<Place>();

?本文是我學習 NgRx 系列的一部分。如果你想跟的話，請看一下。

https://www.danywalls.com/understanding-when-and-why-to-implement-ngrx-in-angular

https://www.danywalls.com/how-to-debug-ngrx-using-redux-devtools

https://www.danywalls.com/how-to-implement-actioncreationgroup-in-ngrx

https://www.danywalls.com/how-to-use-ngrx-selectors-in-angular

https://danywalls.com/when-to-use-concatmap-mergemap-switchmap-and-exhaustmap-operators-in-building-a-c rud-with-ngrx

https://danywalls.com/handling-router-url-parameters-using-ngrx-router-store

此分支包含已安裝 NgRx 的設置，並為 API 呼叫配置了 MockAPI.io。

我們的目標是使用NgRx實體來管理場所，重建actions進行CRUD操作，更新 reducer 使用適配器操作（例如新增、更新和刪除地點）來簡化它，使用選擇器 從商店中檢索地點清單。

安裝 NgRx 實體

首先，使用 npm i 安裝專案依賴項，然後透過執行 ng add @ngrx/entity 使用原理圖新增 NgRx 實體。

git clone https://github.com/danywalls/start-with-ngrx.git
git checkout crud-ngrx
cd start-with-ngrx

完美，我們準備開始重構！

重構國家

在專案的早期版本中，我們手動定義了陣列和減速器來管理狀態。透過 NgRx Entities，我們讓適配器為我們管理收集邏輯。

首先，打開places.state.ts並重構PlacesState以從EntityState擴展。

npm i
ng add @ngrx/entity

接下來，使用 createEntityAdapter 初始化 Place 實體的實體適配器：

interface EntityState<V> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}

最後，使用 getInitialState 將手動的initialState替換為適配器提供的initialState：

export const adapter: EntityAdapter<Place> = createEntityAdapter<Place>();

我們重構了狀態以使用 EntityState 並初始化 EntityAdapter 來自動處理地點清單。

讓我們更新操作以使用 NgRx 實體。

重構動作

在之前的文章中，我手動處理了實體的更新和修改。現在，我們將使用 NgRx Entities 來使用 Update 處理部分更新。

在places.actions.ts中，我們更新Update Place作業以使用Update，這允許我們只修改實體的一部分：

git clone https://github.com/danywalls/start-with-ngrx.git
git checkout crud-ngrx
cd start-with-ngrx

完美，我們更新了與 NgRx 實體 一起使用的操作，使用 Update 類型來簡化處理更新。是時候看看這對減速器有何影響，並重構它以使用實體適配器方法進行添加、更新和刪除位置等操作。

重構Reducer

reducer 是 NgRx Entities 真正發揮作用的地方。我們現在使用實體適配器提供的方法，而不是編寫用於新增、更新和刪除地點的手動邏輯。

以下是我們如何簡化減速器：

npm i
ng add @ngrx/entity

我們使用適配器中的 addOne、updateOne、removeOne 和 setAll 等方法來處理狀態中的實體。

其他有用的方法包括：

• addMany：新增多個實體。

• removeMany：透過 ID 刪除多個實體。

• upsertOne：根據實體的存在添加或更新實體。

閱讀更多關於EntityAdapter中reducer方法的資訊。

重構狀態、操作和化簡器後，我們現在將重構選擇器以利用 NgRx Entities' 預定義選擇器。

重構選擇器

NgRx Entities 提供了一組預先定義的選擇器，使查詢商店變得更加容易。我將直接從適配器使用 selectAll、selectEntities 和 selectIds 等選擇器。

以下是我們如何重建places.selectors.ts中的選擇器：

export type PlacesState = {
  placeSelected: Place | undefined;
  loading: boolean;
  error: string | undefined;
} & EntityState<Place>;

這些內建選擇器顯著減少了手動建立用於存取狀態的選擇器的需要。

重構選擇器以使用預先定義的選擇器，減少手動定義選擇器的需要，是時候更新我們的表單元件以反映這些變更並使用新的狀態和操作了。

更新表單元件

現在我們已經重構了狀態、操作和化簡器，我們需要更新表單元件以反映這些變更。

例如，在 PlaceFormComponent 中，我們可以更新 save 方法以使用 Update 方法。儲存變更時輸入：

interface EntityState<V> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}

我們更新了表單元件以使用新的操作和重構的狀態，讓我們移動，檢查我們的效果以確保它們與 NgRx 實體

正常工作

重構效果

最後，我將讓效果與 NgRx Entities 一起使用，我們只需要更新 PlacesPageActions.updatePlace 並傳遞正確的 Update 即可。 updatePlaceEffect$ 效果中的物件。

export const adapter: EntityAdapter<Place> = createEntityAdapter<Place>();

完成！我的應用程式正在與 NgRx 實體 一起使用，遷移非常簡單！ ，ngrx 實體的文檔非常有幫助，並且

結論

將我的程式碼移到 NgRx Entities 後，我覺得它有助於降低處理集合時的複雜性和樣板程式碼。 NgRx 實體在大多數情況下簡化了集合的使用以及與其大量方法的交互，消除了 CRUD 操作所需的大部分樣板程式碼。

我希望這篇文章能激勵您在需要使用 ngrx 中的集合時使用 ngrx-entities。

• 原始碼：https://github.com/danywalls/start-with-ngrx/tree/ngrx-entities

照片由 Yonko Kilasi 在 Unsplash 上拍攝

以上是使用 NgRx 實體簡化您的 Angular 程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！