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

2022-07-23 22:03:26 阅读：139 来源： 互联网

标签：状态 Ngrx const Reducer State reducer Store

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 纯函数来进行。

标签：状态,Ngrx,const,Reducer,State,reducer,Store
来源： https://www.cnblogs.com/sap-jerry/p/16513183.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

Actions

Reducer or Action Reducer