关于前端:Angular-Ngrx-Store-里-State-和-Reducer-的绑定关系是如何实现的

31次阅读

共计 1089 个字符，预计需要花费 3 分钟才能阅读完成。

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

const state = {developer: []
};

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

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

一个动作的例子：

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

下面的 type 属性阐明了操作的用意。在这种状况下，type 属性是 ADD_DEVELOPER，这意味着正在调度一个操作以增加存储在该操作的无效负载属性中的新 Developer 对象。无效负载只是与 reducer 增加到返回给 Store 订阅者的新状态的操作类型相干的数据。

就状态治理库而言，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 纯函数来进行。

正文完