Angular 應用程式需要管理一些應用程式狀態，包括伺服器端資料、使用者資訊、使用者輸入、UI 狀態和許多其他變數。 開發人員經常利用可注入服務(Injectable Service)在一個集中的地方提供此功能（包括與一些後端 Web API 的通訊），以便應用程式中的其餘元件可以訪問此共享資料以對其進行處理或更新。、

這種做法僅僅適用於小型應用程式。 在某些情況下，隨著應用程式規模的增長以及多個元件開始發出呼叫以更新或讀取應用程式狀態，這種實現變得不可擴充套件。 應用程式狀態也可能變得不一致或不可靠。

這就是我們為何要引入 Ngrx Store.

應用程式狀態是一組資料片段(data slice)的集合，表示應用程式在任何給定時間的狀態。如前所述，應用程式狀態可以是需要跨應用程式共享的任何資料切片：

- 伺服器端響應資料：從 Web API 請求和返回的資料
- 使用者資訊：當使用者登入應用程式時，儲存使用者名稱、電子郵件和其他與使用者相關的資訊。這使得使用者稍後瀏覽和導航應用程式時可以快速訪問。
- 使用者輸入：在任何搜尋頁面上，使用者輸入搜尋的主題或短語，應用程式將結果作為列表顯示在他們的螢幕上。當使用者單擊結果時，應用程式導航到另一個頁面以檢視選擇的詳細資訊。使用者可以透過導航回到搜尋頁面並從列表中選擇其他內容來檢視另一個搜尋結果。
- UI 狀態：流行的應用程式 UI 結構模式之一是具有垂直左側選單和右側內容區域。提供一個按鈕來最小化左側選單。左側選單的狀態被儲存，以便當使用者導航到另一個螢幕或頁面時，左側選單保持最小化。
- 路由器/位置狀態：當從一個螢幕導航到另一個螢幕時，應用程式會跟蹤路由詳細資訊。狀態需要跟蹤使用者選擇了哪個記錄，以便知道以後要渲染什麼。

在 SAP 電商雲 Spartacus UI 裡，典型的 Application State slice 包括下列一些例子。以 Site Context 場景為例，定義在 State.ts 檔案裡：

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

每一個狀態切片都有一個所謂的 top state，稱之為 Feature State，通常用一個常量字串代表：

```typescript
export interface StateWithSiteContext {
  [SITE_CONTEXT_FEATURE]: SiteContextState;
}
```

SiteContextState 才是真正包含業務資料的 state 資料結構：

```typescript
export interface SiteContextState {
  languages: LanguagesState;
  currencies: CurrenciesState;
  baseSite: BaseSiteState;
}
```

Angular Ngrx Store 應用程式狀態的一些典型例子

相關文章