Angular Ngrx 里 Store 和 State 的关系

简介: Angular Ngrx 里 Store 和 State 的关系

NgRx 是一组用于响应式扩展和状态管理的 Angular 库。 通过简化应用程序在对象中的状态并强制执行单向数据流,它使 Angular 开发中的状态管理更容易。


一个完整的状态管理系统应该使开发人员能够对状态进行建模——例如,创建状态应该是什么样子的简单表示,更新其值,在值更改时监视状态,并检索状态的值。


不少 Ngrx 的初学者,经常容易把 Store 和 State 这对概念相混淆。


我们可以把 Store 看成 State 的集合或者抽象。


应用程序状态驻留在 Store 中。 Store 就像 ngrx/store 模块中状态的容器。 此外,Angular 组件将 Store 注入到它们的构造函数中以建立通信通道。 Store 公开了 Angular 组件使用的两种方法。 通过注入 Store,组件可以访问以下功能:

  • select: Store 使用此方法从 Store 中包含的状态(其实就是一个纯 JavaScript 对象)中返回一片状态数据。 select 方法 返回 Store 对象本身,后者是一个 Observable,以便组件可以挂钩到 select() 方法,以便在 Store 组成新的状态对象时监视状态的变化。

在 SAP 电商云 Spartacus UI 中,这是一种常见的实现方式。

在 Service 类的构造函数里注入 Store:

然后调用 store.select,传入一个 selector,返回一个 Observable 对象:

传入 select 方法的是一个 selector:

这个 selector 接受两个类型参数,一个是 feature state,另一个是 Application 的 state 切片。

  • dispatch:Store 使用此方法允许组件向 Store 发送操作。 带有选项的操作可以包含有效负载。 Store 处理通过 reducer 调度的操作。

下面同样是 SAP 电商云 Spartacus UI 的一个例子:

load(orgCustomerId: string) {
    this.userIdService.takeUserId(true).subscribe(
      (userId) =>
        this.store.dispatch(
          new B2BUserActions.LoadB2BUser({
            userId,
            orgCustomerId,
          })
        ),
      () => {
        // TODO: for future releases, refactor this part to thrown errors
      }
    );
  }

总而言之,一个组件在 Store 上调度一个操作。Store 通过执行 reducer 来响应操作并最终组成一个新的状态对象。之后 Store 将有一个新的状态,并通知订阅者(组件)新的更新。

相关文章
|
9月前
|
存储 API 网络架构
Angular Ngrx Store 应用程序状态的一些典型例子
Angular Ngrx Store 应用程序状态的一些典型例子
|
9月前
|
存储 JavaScript 前端开发
Angular Ngrx Store 里 State 和 Reducer 的绑定关系是如何实现的
Angular Ngrx Store 里 State 和 Reducer 的绑定关系是如何实现的
|
7月前
|
JavaScript UED SEO
Angular 应用启用服务器端渲染后 Ngrx store 和 re-hydration 的交互关系
Angular 应用启用服务器端渲染后 Ngrx store 和 re-hydration 的交互关系
|
7月前
|
缓存 UED
如何删除 Angular SSR 应用 State Transfer 嵌入到 HTML 里的某些字段
如何删除 Angular SSR 应用 State Transfer 嵌入到 HTML 里的某些字段
|
7月前
|
运维 前端开发 JavaScript
基于 Angular Universal 引擎进行服务器端渲染的前端应用 State Transfer 故障排查案例
基于 Angular Universal 引擎进行服务器端渲染的前端应用 State Transfer 故障排查案例
|
8月前
|
UED
Angular 应用如何从 Transfer State 状态中读取数据
Angular 应用如何从 Transfer State 状态中读取数据
|
8月前
|
存储 JavaScript 前端开发
浅谈 Angular 引入 Transfer State 机制的动机
浅谈 Angular 引入 Transfer State 机制的动机
|
1月前
|
存储 前端开发 API
浅谈 Angular 应用前端消息显示机制的一个实际需求
浅谈 Angular 应用前端消息显示机制的一个实际需求
|
1月前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider
|
1月前
|
JavaScript 前端开发 架构师
Angular进阶:理解RxJS在Angular应用中的高效运用
RxJS(Reactive Extensions for JavaScript)是JavaScript的一个响应式编程库,特别适用于处理异步数据流。
33 0