当前位置: 首页 > Web前端 > HTML

AngularNgrxstoreSelector简介

时间:2023-04-02 19:12:18 HTML

选择器是纯函数,以状态切片(Stateslice)作为输入参数,返回组件可以使用的状态数据切片(这些切片包含真实的业务数据)。正如数据库有自己的SQL查询语言一样,Ngrx/store模块也有自己的查询工具,选择器。在Angular应用程序中,每个功能模块负责将自己的状态注入根应用程序状态。所以一个状态是一个带有子属性等的属性树。您可以在状态树的不同级别定义选择器,以避免每次Store组成新状态并通知组件时手动遍历状态树。基于上面代码中定义的状态,开发者想使用一个选择器从状态中查询并返回Developers数组:开发人员;});上面代码createSelector的第一个参数是一个返回根状态的纯函数。createSelector返回一个选择器。该选择器返回一个类型化的Developers数组。任何组件现在都可以使用Store.select()方法订阅对Developers数据(状态数据片段)的更改。this.store.select(getAllDevelopers).subscribe(developers=>console.log(developers));上图描述了一个控制和状态迁移的流程图。该循环从一个Angular组件向Store分派一个动作开始。Store捕获动作并执行reducers。结果是保存在Store中的新组合状态。只有这样,Store才会通知所有与状态变化相关的组件新状态可用并准备好使用。请注意,组件之间的流发生在单向数据流中,简化并解决了不使用Store而仅依赖与服务通信的组件来读取和更新应用程序状态所造成的混乱。下面是在SAP电商云SpartacusUI实现中使用服务类中store的select方法进行查询的例子:select方法接受的是一个选择器Selector,而不是一个简单的map函数。