NgRx 是一個用於 Angular 應用開發的響應式 State 管理工具庫。

受到 Redux 的影響，Ngrx 底層使用 Rxjs 來允許使用者管理整個應用的全域性狀態。

不是每個應用程式都需要狀態管理解決方案，但是集中應用程式的狀態和邏輯可以實現撤消/重做、狀態永續性等強大功能。

使用NgRx需要理解一些關鍵概念，Actions 就是其中之一。

在NgRx上下文中，動作描述的是可以從任何地方(例如元件和服務)分派的唯一事件例項。

下面的程式碼展示了一個簡單操作的樣子。顯示登入螢幕的元件可以排程(dispatch)這個動作，告訴正在監聽的人(例如 effect )應該傳送一個到後端登入 endpoint 的HTTP請求。登入資料透過排程 action 提供:

![](https://img-blog.csdnimg.cn/img_convert/36306ae13a7024bc4f7f8ffeef5d632a.png)

透過 `@ngrx/store` 的 `createAction` 構造器建立了一個 Action 例項，包含了使用者輸入的使用者名稱和密碼。

對於上圖所示的原始碼，可以編寫單元測試程式碼，檢查提交了 login form 之後，是否排程了對應的 action.

如果應用程式變大，應用程式狀態也會變大。一開始你可能只有幾個動作，一個減速器和兩個效果，但幾年後，你可能突然有動作、減速器和效果分散在不同團隊的不同應用程式和庫中。

本文我們一起來探討一種簡易的透過 ActionSubject 實現的探測某 Action 是否已經 Dispatch 的方式。

NgRx提供了一個整潔的實用程式ActionsSubject，我們可以透過依賴注入來訪問它，如下圖所示：

![](https://img-blog.csdnimg.cn/img_convert/4e01c0598947da5818fc8a6f4b15e822.png)

這個名字已經表明我們在使用 `Subject` 的概念了。Subject 是 Observable 的一種特殊型別。因此，我們可以訂閱它以獲得它的最新值。在本例中，我們透過該流檢索的任何值都是一個已分派的NgRx Action。

透過訂閱ActionsSubject，我們將收到應用程式中任何正在分派的操作的通知。我們可以記錄傳入的操作，以驗證是否使用正確的資料和正確的順序分派了適當的操作。這有助於理解在整個會話中如何以及何時分派操作。

程式碼如下圖所示：

```typescript
import { Component, OnInit } from '@angular/core';
	import { ActionsSubject } from '@ngrx/store';
	import { skip } from 'rxjs/operators';

@Component({
	  selector: 'app-root',
	  templateUrl: './app.component.html',
	  styleUrls: ['./app.component.css']
	})
	export class AppComponent implements OnInit {

constructor(private actionListener$: ActionsSubject) {}

ngOnInit() {
	    this.actionListener$.pipe(
	      skip(1) // optional: skips initial logging done by ngrx
	    ).subscribe((action) => console.info('ngrx action', action));
	  }
	}

```

上述程式碼的幾處關鍵點：

- 新增了 `skip(1)` 來避免記錄NgRx自己排程的第一個操作。

- 開發人員應該考慮是否真的想要記錄任何分派操作。畢竟，您可能不希望在生產環境中記錄使用者憑據。一種方法是在開發模式下只偵聽，從而在生產環境中禁用任何操作日誌記錄。

- 應該取消訂閱以避免記憶體洩漏。例如，可以在Angular提供的ngOnDestroy生命週期鉤子中保留訂閱和取消訂閱的引用。

在較大的應用程式中，這種方法可以透過記錄任何已分派的操作來真正幫助我們理解何時以及如何分派操作。幸運的是，NgRx讓我們很容易做到這一點。不需要另一個包或瀏覽器擴充套件。

使用 Ngrx ActionSubject 監聽 Dispatched NgRx Actions

相關文章