Angular 中的 ngRx 存儲

在開始之前，先講一個小背景故事。因此，幾週前，我正在從事的一個角度專案中有一個要求，其中我必須保持一段資料完整，以便其他幾個元件可以使用它。我的 React 直覺建議我使用某種 Angular 版本的上下文 API，這讓我找到了 3 種 Angular 方式來管理狀態並保持資料完整。

1. 元件狀態：對於具有最少共享資料的簡單應用程式或元件，我們可以使用 Angular 的元件屬性和事件綁定來管理各個元件內的狀態。這顯然是不合時宜的，因為我需要在多個元件之間共享資料。

2. 基於服務的狀態管理：服務可用於建立集中式狀態管理解決方案。但採用這種方法後，應用程式的效能和可擴展性將會受到影響。

3. ngRx Store：ngRx store 提供集中式狀態管理功能。 NGRX 使用 RxJS 可觀察量和操作來管理狀態。

三個 ngRx Store 似乎是最適合的一個。

實作 ngRx 儲存：

為了更好地理解 ngRx 的實現，我們首先需要了解 ngRx 是如何運作的。

流程從組件開始。 ngRx 的好處是我們的元件不需要知道如何管理狀態。它唯一關心的是調度一個動作來通知發生的事情（事件），例如用戶點擊了刪除按鈕。

此時reducer就發揮作用了。減速器負責確定特定操作應如何修改狀態。通常我們為每個想要管理狀態的實體都有減速器。因此，Reducer 會偵測應用程式中分派的所有操作，並確定應如何修改狀態，修改後，將更新後的狀態儲存在 ngRx Store（這是應用程式中所有狀態的全域儲存）中。

最後，當元件想要存取儲存空間時，該元件使用選擇器從儲存中提取所需的狀態。

現在讓我們（實際上是我的）親自動手，為 Todo 應用程式實現一個商店。

第 1 步：建立動作

在 createAction 方法中，我們傳遞兩個參數 - 一個用於區分操作的唯一字串，另一個是我們要發送的有效負載（可選）。

第2步：建立Reducers 在減速器中，我們傳遞初始狀態和在分派特定操作時執行的任務。

第 3 步：調度操作 我們透過呼叫 store 的調度方法將操作傳遞給它來調度一個操作。

第 4 步：建立選擇器

AppState 是指整個應用程式的中央存儲，我們從中選擇待辦事項狀態。現在我們可以開始使用儲存數據，就像我在調度操作程式碼的第 1 行中所做的那樣。 11.

最後，我們需要在應用程式模組的導入中加入 todoReducer，以便它可以在整個應用程式中使用。

結論

在這篇部落格中，我詳細總結並解釋了 ngRx 儲存、它是如何運作的以及我們如何在我們的應用程式中實現它。隨著應用程式的成長，ngRx 儲存會非常有用，可以儲存資料並跨不同元件存取資料。 希望有幫助;)

以上是Angular 中的 ngRx 存儲的詳細內容。更多資訊請關注PHP中文網其他相關文章！