選擇器是純函式，它將狀態切片(State slice)作為輸入引數，並返回元件可以使用的狀態資料切片(這些切片包含真正的業務資料)。 正如資料庫有自己的 SQL 查詢語言一樣，Ngrx/store 模組也有自己的查詢工具，即選擇器。

在 Angular 應用程式中，每個功能模組負責將自己的狀態注入到根應用程式狀態(root application state)中。 因此，狀態是具有子屬性等的屬性樹。您可以在狀態樹的不同級別定義選擇器，以避免每當 Store 組成新狀態並通知元件時手動遍歷狀態樹。

根據上面在程式碼中定義的狀態，開發人員希望使用選擇器從狀態中查詢並返回 Developers 陣列：

```typescript
export const getAllDevelopers =
    createSelector(getState, (state): Developer[] => {
        return state && state.developers;
    }
);
```

上面程式碼 `createSelector` 的第一個引數，是一個返回根狀態的純函式。createSelector 返回一個選擇器。

此選擇器返回一個型別化的 Developers 陣列。 現在，任何元件都可以使用 Store.select() 方法來訂閱 Developers 資料（狀態資料切片）的更改。

```typescript
this.store.select<developer>(getAllDevelopers).subscribe(
    developers => console.log(developers)
);
```
![](https://img-blog.csdnimg.cn/img_convert/b12bfcafd0a61d0b6b44d2ae662eca99.png)

上圖描述了一個控制和狀態遷移的流程圖。這個迴圈從一個 Angular 元件向 Store 分派一個動作開始。 Store 捕獲動作並執行 reducer。 結果是儲存在 Store 中的新組合狀態。 只有這樣，Store 才會通知與 state 中的更改相關的所有元件，新狀態可用並準備好使用。 請注意，元件之間的流動發生在單向資料流中，簡化並解決了由於不使用 Store 而僅依賴與服務通訊的元件來讀取和更新應用程式狀態而導致的混亂。

下面是 SAP 電商雲 Spartacus UI 實現中在 service 類裡使用 store 的 select 方法進行查詢的例子：

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

select 方法接受一個選擇器 Selector，而不是單純的 map 函式。</developer>

使用 NgRX Store Module 給 Angular 應用開發帶來的收益

相關文章