NgRx 是一組用於響應式擴充套件和狀態管理的 Angular 庫。 透過簡化應用程式在物件中的狀態並強制執行單向資料流，它使 Angular 開發中的狀態管理更容易。

一個完整的狀態管理系統應該使開發人員能夠對狀態進行建模——例如，建立狀態應該是什麼樣子的簡單表示，更新其值，在值更改時監視狀態，並檢索狀態的值。

不少 Ngrx 的初學者，經常容易把 Store 和 State 這對概念相混淆。

我們可以把 Store 看成 State 的集合或者抽象。

應用程式狀態駐留在 Store 中。 Store 就像 ngrx/store 模組中狀態的容器。 此外，Angular 元件將 Store 注入到它們的建構函式中以建立通訊通道。 Store 公開了 Angular 元件使用的兩種方法。 透過注入 Store，元件可以訪問以下功能：

- select: Store 使用此方法從 Store 中包含的狀態(其實就是一個純 JavaScript 物件)中返回一片狀態資料。 select 方法 返回 Store 物件本身，後者是一個 Observable，以便元件可以掛鉤到 select() 方法，以便在 Store 組成新的狀態物件時監視狀態的變化。

在 SAP 電商雲 Spartacus UI 中，這是一種常見的實現方式。

在 Service 類的建構函式里注入 Store：
![](https://img-blog.csdnimg.cn/img_convert/53d48d88b2f580a379f6814bedea7f0d.png)

然後呼叫 `store.select`，傳入一個 selector，返回一個 Observable 物件：
![](https://img-blog.csdnimg.cn/img_convert/773793d6fbc4fbc0694c6548838b08b2.png)

傳入 select 方法的是一個 selector：

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

這個 selector 接受兩個型別引數，一個是 feature state，另一個是 Application 的 state 切片。

- dispatch：Store 使用此方法允許元件向 Store 傳送操作。 帶有選項的操作可以包含有效負載。 Store 處理透過 reducer 排程的操作。

下面同樣是 SAP 電商雲 Spartacus UI 的一個例子：

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

```typescript
load(orgCustomerId: string) {
    this.userIdService.takeUserId(true).subscribe(
      (userId) =>
        this.store.dispatch(
          new B2BUserActions.LoadB2BUser({
            userId,
            orgCustomerId,
          })
        ),
      () => {
        // TODO: for future releases, refactor this part to thrown errors
      }
    );
  }
```

總而言之，一個元件在 Store 上排程一個操作。Store 透過執行 reducer 來響應操作並最終組成一個新的狀態物件。之後 Store 將有一個新的狀態，並通知訂閱者（元件）新的更新。

Angular Ngrx 裡 Store 和 State 的關係

相關文章