乐趣区

关于前端:使用-NgRX-Store-Module-给-Angular-应用开发带来的收益

选择器是纯函数,它将状态切片 (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 函数。

退出移动版