使用 NgRX Store Module 给 Angular 应用开发带来的收益

2022-07-23 22:00:37 阅读：151 来源： 互联网

标签：状态 NgRX Module 选择器 state select 组件 Angular Store

选择器是纯函数，它将状态切片(State slice)作为输入参数，并返回组件可以使用的状态数据切片(这些切片包含真正的业务数据)。正如数据库有自己的 SQL 查询语言一样，Ngrx/store 模块也有自己的查询工具，即选择器。

在 Angular 应用程序中，每个功能模块负责将自己的状态注入到根应用程序状态(root application state)中。因此，状态是具有子属性等的属性树。您可以在状态树的不同级别定义选择器，以避免每当 Store 组成新状态并通知组件时手动遍历状态树。

根据上面在代码中定义的状态，开发人员希望使用选择器从状态中查询并返回 Developers 数组：

export const getAllDevelopers =
    createSelector(getState, (state): Developer[] => {
        return state && state.developers;
    }
);

上面代码 createSelector 的第一个参数，是一个返回根状态的纯函数。createSelector 返回一个选择器。

此选择器返回一个类型化的 Developers 数组。现在，任何组件都可以使用 Store.select() 方法来订阅 Developers 数据（状态数据切片）的更改。

this.store.select<Developer[]>(getAllDevelopers).subscribe(
    developers => console.log(developers)
);

上图描述了一个控制和状态迁移的流程图。这个循环从一个 Angular 组件向 Store 分派一个动作开始。 Store 捕获动作并执行 reducer。结果是保存在 Store 中的新组合状态。只有这样，Store 才会通知与 state 中的更改相关的所有组件，新状态可用并准备好使用。请注意，组件之间的流动发生在单向数据流中，简化并解决了由于不使用 Store 而仅依赖与服务通信的组件来读取和更新应用程序状态而导致的混乱。

下面是 SAP 电商云 Spartacus UI 实现中在 service 类里使用 store 的 select 方法进行查询的例子：

select 方法接受一个选择器 Selector，而不是单纯的 map 函数。

标签：状态,NgRX,Module,选择器,state,select,组件,Angular,Store
来源： https://www.cnblogs.com/sap-jerry/p/16513170.html

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

ICode9

使用 NgRX Store Module 给 Angular 应用开发带来的收益