Angular 應(yīng)用程序需要管理一些應(yīng)用程序狀態(tài)

包括服務(wù)器端數(shù)據(jù)、用戶信息、用戶輸入、UI 狀態(tài)和許多其他變量。 開發(fā)人員經(jīng)常利用可注入服務(wù)(Injectable Service)在一個(gè)集中的地方提供此功能（包括與一些后端 Web API 的通信），以便應(yīng)用程序中的其余組件可以訪問此共享數(shù)據(jù)以對其進(jìn)行處理或更新。

這種做法僅僅適用于小型應(yīng)用程序。 在某些情況下，隨著應(yīng)用程序規(guī)模的增長以及多個(gè)組件開始發(fā)出調(diào)用以更新或讀取應(yīng)用程序狀態(tài)，這種實(shí)現(xiàn)變得不可擴(kuò)展。 應(yīng)用程序狀態(tài)也可能變得不一致或不可靠。

這就是我們?yōu)楹我?Ngrx Store.

應(yīng)用程序狀態(tài)是一組數(shù)據(jù)片段(data slice)的集合

表示應(yīng)用程序在任何給定時(shí)間的狀態(tài)。如前所述，應(yīng)用程序狀態(tài)可以是需要跨應(yīng)用程序共享的任何數(shù)據(jù)切片：

• 服務(wù)器端響應(yīng)數(shù)據(jù)：從 Web API 請求和返回的數(shù)據(jù)
• 用戶信息：當(dāng)用戶登錄應(yīng)用程序時(shí)，存儲(chǔ)用戶名、電子郵件和其他與用戶相關(guān)的信息。這使得用戶稍后瀏覽和導(dǎo)航應(yīng)用程序時(shí)可以快速訪問。
• 用戶輸入：在任何搜索頁面上，用戶輸入搜索的主題或短語，應(yīng)用程序?qū)⒔Y(jié)果作為列表顯示在他們的屏幕上。當(dāng)用戶單擊結(jié)果時(shí)，應(yīng)用程序?qū)Ш降搅硪粋€(gè)頁面以查看選擇的詳細(xì)信息。用戶可以通過導(dǎo)航回到搜索頁面并從列表中選擇其他內(nèi)容來查看另一個(gè)搜索結(jié)果。
• UI 狀態(tài)：流行的應(yīng)用程序 UI 結(jié)構(gòu)模式之一是具有垂直左側(cè)菜單和右側(cè)內(nèi)容區(qū)域。提供一個(gè)按鈕來最小化左側(cè)菜單。左側(cè)菜單的狀態(tài)被存儲(chǔ)，以便當(dāng)用戶導(dǎo)航到另一個(gè)屏幕或頁面時(shí)，左側(cè)菜單保持最小化。
• 路由器/位置狀態(tài)：當(dāng)從一個(gè)屏幕導(dǎo)航到另一個(gè)屏幕時(shí)，應(yīng)用程序會(huì)跟蹤路由詳細(xì)信息。狀態(tài)需要跟蹤用戶選擇了哪個(gè)記錄，以便知道以后要渲染什么。

典型Application State slice

在 SAP 電商云 Spartacus UI 里，典型的 Application State slice 包括下列一些例子。

以 Site Context 場景為例，定義在 State.ts 文件里：

每一個(gè)狀態(tài)切片都有一個(gè)所謂的 top state，稱之為 Feature State，通常用一個(gè)常量字符串代表：

export interface StateWithSiteContext {
  [SITE_CONTEXT_FEATURE]: SiteContextState;
}

SiteContextState 才是真正包含業(yè)務(wù)數(shù)據(jù)的 state 數(shù)據(jù)結(jié)構(gòu)：

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

以上就是Angular Ngrx Store應(yīng)用程序狀態(tài)典型示例詳解的詳細(xì)內(nèi)容，更多關(guān)于Angular Ngrx Store程序狀態(tài)的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論