NgRX Store 將狀態建模為 Store 內的單個簡單 JavaScript 物件。 狀態是不可變的或只讀的。 這意味著沒有直接的 Store API 來更改 Store 內的狀態物件。 這種狀態物件的一個例子可以表示為：

```typescript
const state = {
    developer: []
};
```

Store 裡儲存著很多應用狀態的切片，稱之為 State.

# Actions

為了更新 Store 中的狀態，應用程式需要排程一個 Action. 一個 reducer，也稱為純函式，捕獲這個動作，對狀態執行更新，並返回一個`新的`修改後的不可變的狀態物件。

一個動作的例子：

```typescript
const action = {
    type: 'ADD_DEVELOPER',
    payload: {
        name: 'Bilal',
        competency: ['ASP.NET', 'Angular']
    }
};
```

上面的 type 屬性說明了操作的意圖。 在這種情況下，type 屬性是 ADD_DEVELOPER，這意味著正在排程一個操作以新增儲存在該操作的有效負載屬性中的新 Developer 物件。 有效負載只是與reducer 新增到返回給Store 訂閱者的新狀態的操作型別相關的資料。

# Reducer or Action Reducer

就狀態管理庫而言，Action Reducer 或 Reducer 是純函式。 Reducers 響應動作並返回一個新的狀態物件，其中包含狀態內的所有更改，因此狀態的不可變性質。 reducer 分析分發的動作，讀入動作的有效負載，對 Store 內部的狀態執行適當的動作，並返回一個全新的狀態物件，其中包含所有更改。Reducer 的一個例子：

```typescript
function reducer(state: State, action: Action) {
    const actionType = action.type;
    const developer = action.payload;

switch (actionType) {
        case 'ADD_DEVELOPER': {
            const developers = [...state.developers, developer];
            return { developers }
        }
        ...
    }
}
```

在設定 ngrx/store 模組期間，我們使用應用程式中所有可用狀態段及其對應的 reducer 之間的對映配置來 StoreModule 類。 換句話說，我們透過這種方式告訴 Store，當 Store 想更新一個特定的狀態切片時，使用指定的 reducer。

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/97249dba281341778c4027e868398992.png#pic_center)

上面程式碼的語義是，告訴 Store，當其需要更新 SITE_CONTEXT_FEATURE 代表的 Application State 時，請使用 reducerToken 代表的 Reducer 純函式來進行。

Angular Ngrx Store 裡 State 和 Reducer 的繫結關係是如何實現的

相關文章