Angular Ngrx Store 里 State 和 Reducer 的绑定关系是如何实现的

NgRX Store 将状态建模为 Store 内的单个简单 JavaScript 对象。 状态是不可变的或只读的。 这意味着没有直接的 Store API 来更改 Store 内的状态对象。 这种状态对象的一个例子可以表示为：

const state = {
    
    
    developer: []
};

Store 里存储着很多应用状态的切片，称之为 State.

Actions

为了更新 Store 中的状态，应用程序需要调度一个 Action. 一个 reducer，也称为纯函数，捕获这个动作，对状态执行更新，并返回一个新的修改后的不可变的状态对象。

一个动作的例子：

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 的一个例子：

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。

上面代码的语义是，告诉 Store，当其需要更新 SITE_CONTEXT_FEATURE 代表的 Application State 时，请使用 reducerToken 代表的 Reducer 纯函数来进行。