开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

ngrx存储选择始终返回未定义

ngrx存储是一个用于管理应用程序状态的库，它是基于Redux模式的Angular状态管理工具。它提供了一个可预测的状态容器，用于存储和管理应用程序的状态数据。ngrx存储的核心概念包括：状态（State）、动作（Action）和归约器（Reducer）。

状态（State）是应用程序的数据源，它代表了应用程序的整体状态。状态可以是任何类型的数据，例如对象、数组、字符串等。在ngrx存储中，状态是只读的，只能通过发出动作来修改。

动作（Action）是对状态进行更改的指令。它是一个简单的JavaScript对象，包含一个类型和一个可选的有效负载。动作描述了应用程序中发生的事件，例如用户交互、异步操作的结果等。

归约器（Reducer）是一个纯函数，它接收当前状态和动作作为参数，并返回一个新的状态。归约器根据动作的类型来决定如何更新状态。它负责处理动作并返回新的状态，而不会直接修改原始状态。

ngrx存储的优势在于它提供了一种一致的方式来管理应用程序的状态。通过将状态集中存储在一个地方，可以更容易地跟踪和调试应用程序的状态变化。同时，ngrx存储还提供了强大的工具和中间件来处理异步操作、时间旅行调试等高级功能。

ngrx存储适用于中大型的Angular应用程序，特别是那些需要处理复杂状态管理的应用程序。它可以帮助开发人员更好地组织和维护应用程序的状态，提高代码的可维护性和可测试性。

对于使用ngrx存储的应用程序，腾讯云提供了一些相关产品和服务，可以帮助开发人员更好地构建和部署应用程序。其中，推荐的产品包括：

云服务器（CVM）：提供可扩展的虚拟服务器实例，用于部署和运行应用程序。产品介绍链接：https://cloud.tencent.com/product/cvm
云数据库MySQL版（CDB）：提供高性能、可扩展的关系型数据库服务，用于存储和管理应用程序的数据。产品介绍链接：https://cloud.tencent.com/product/cdb_mysql
云原生容器服务（TKE）：提供高度可扩展的容器化应用程序管理平台，用于部署和运行容器化的应用程序。产品介绍链接：https://cloud.tencent.com/product/tke
人工智能平台（AI Lab）：提供丰富的人工智能算法和工具，用于构建和训练机器学习模型，实现智能化的应用程序。产品介绍链接：https://cloud.tencent.com/product/ai

请注意，以上推荐的产品和服务仅供参考，具体选择应根据实际需求和项目要求进行评估和决策。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

NgRx Selector 的 Memoization 特性学习笔记

在计算机编程领域中，memoization 或 memoisation 是一种优化技术，主要用于通过存储昂贵的函数调用的结果并在再次出现相同的输入时返回缓存的结果来加速计算机程序。...什么是 NgRx selector 选择器是用于获取存储状态切片( store state slices)的纯函数。@ngrx/store 提供了一些帮助函数来优化这个选择。...即使您在 allBooks 中更新它们，您的可见书籍也将始终是最新的。如果选择了一个，它们将始终显示属于您的用户的书籍，如果没有选择用户，它们将显示所有书籍。...它为状态的特征切片返回一个类型化的选择器函数。...在第一次调用选择器后，其记忆值存储在内存中。如果随后使用相同的参数调用选择器，它将返回记忆值。如果随后使用不同的参数调用选择器，它将重新计算并更新其记忆值。

1.4K2 0

参加 Spartacus 开源项目开发时需要注意的一些编程规范

我们使用 NgRx 存储来管理 Spartacus 功能中的全局应用程序状态。使用 NgRx 在性能、更好的可测试性和易于故障排除、方面具有明显的优势。...如果要从 UI 组件调用使用 NgRx 逻辑的功能，则应实现外观服务功能以公开功能并将 NgRx 代码封装在核心库中。 NgRx 的复杂性被封装在核心库中。门面服务可从核心库中获得。...外观服务公开了核心库功能，但它们在其实现中隐藏了 NgRx 逻辑。内置 Spartacus UI 组件不应包含 NgRx 逻辑。相反，UI 组件应该调用外观服务函数。...此外，我们应该始终尝试减少模块依赖性。单元测试必须覆盖所有代码。关于端到端测试，基本的 UI 端到端测试以及可访问性端到端测试必须始终涵盖面向 UI 的新功能。

6834 0

什么是 Angular Ngrx Store 里的 Meta-Reducer

本文选择了 Angular 团队提供的官方 Heroes Angular 应用程序作为起始应用程序来展示 Angular 的特性。...重构后的工程如下图所示： @ngrx/store: @ngrx/store 包代表主要的 NgRX 存储包。...@ngrx/store-devtools：@ngrx/store-devtools 包有助于检测 Store，让您可以使用著名的 Redux DevTools Chrome 扩展来调试应用程序 @ngrx.../effect：@ngrx/effects 包处理在应用程序中使用 ngrx/store 模块的 effect，即向远端服务器发起的数据读写请求 @ngrx/router-store：@ngrx/router-store...根据定义，高阶函数表示接受的输入参数类型是函数，返回的值是另一个函数的函数。 MetaReducer 类型接受一个 reducer 作为输入参数，并返回一个与 reducer 签名完全相同的函数。

1K1 0

SAP Spartacus 的会话管理 Session Management

注意：在 OAuth 客户端中启用客户端凭据流时，应始终将 ROLE_CLIENT 与 Spartacus OAuth 客户端一起使用。...当您登录时，服务器会确认您的凭据 - credentials, 并向应用程序返回访问令牌。然后，此令牌将用于您帐户上的所有请求，例如更新您的个人资料、修改购物车和结帐。...但是，这种交互始终通过 OAuthLibWrapperService，这是一个用于将外部库与 Spartacus 代码隔离的层。...以前，这些代币保存在 NgRx Store 中，但在 Spartacus 3.0 中，有专门的服务来保存数据。...该库需要一个带有类似于 localStorage 或 sessionStorage 的 API 的存储机制，这是从 NgRx 切换到带有流的服务来保存数据的主要原因。

2.9K3 0

使用 selector 从 SAP Spartacus state 里读取 Cart 数据

选择器 selector 是用于获取存储状态 state 切片的纯函数。 @ngrx/store 提供了一些帮助函数来优化这个选择。选择器在选择状态切片时提供了许多功能。...使用 createSelector 和 createFeatureSelector 函数时，@ngrx/store 会跟踪调用选择器函数的最新参数，在 ngrx-store.js 里完成。...因为选择器是纯函数，当参数匹配时可以返回最后一个结果，而无需重新调用选择器函数。这可以提供性能优势，特别是对于执行昂贵计算的选择器。这种做法被称为 memoization....单步调试：先执行distinguished，再执行 map： value 包含了所有的 state 数据：直接从内存里返回上一次的 result：强行在调试器里把值改了。

9542 0

关于 SAP Spartacus PageMetaService 和 MetaResolver

PageMetaService, 通过项目自定义的类型和自定义注入器，调用 getMulti 方法，获得注入的 Resolvers： meta$ 的值是 defer 返回的一个 Observable....当 meta$ 被 subscribe 时，工厂函数才会触发：工厂函数内部： getCurrentPage：最后还是从 ngrx store 里获取数据： pageContext 存储在 routingService...中，后者也是从 ngrx store 里获取数据：然后根据 pageContext 获取 page 数据：下图展示了从 ngrx store 里读取的 home page 的数据：注入的...page resolver：因为 home page 是 content page，所以返回 ContentPageMetaResolver：依次遍历每个 resolver，调用其 resolve...方法：以 resolveTitle 为例：返回的就是其 title$ Observable 对象： title$ 对象的数据源也来自 ngrx store：

4621 0

angular4实战（4）ngrx

以上这两种方式都不会引发angular的检查策略（前提是在元数据中设置了changeDetection: ChangeDetectionStrategy.OnPush）在此设置基础下，想要启动策略，就需要返回新的对象和数组...如Object.assign({}, {name:j_bleach}, {name:bleach}); 或者[…[1,2,3],4]这样返回一个新的对象。...而在本例中，通过reducer返回的是一个新的值（一般是一个新的对象），新的值变化也会引起组件检查。...ps：这里边个人理解是因为每一个简单类型的值，都会在新开栈上来存储，而对象不同，对象存在同一个指针的引用（是否可以类似深浅拷贝，这里打个问号）；一篇国外的文章帮助理解：https://blog.thoughtram.io...高中英语水平翻译一下：async这个管道，会返回订阅的Observe ,promise对象的最新的值，当观察者发现值有改变时，就会触发组件的检查策略，并且在组件销毁时也会自动的去取消订阅避免内存泄漏。

1.1K3 0

Spartacus CMS Feature selector 的实现明细

有下面这段代码： import { createFeatureSelector, MemoizedSelector } from '@ngrx/store'; import { CmsState, CMS_FEATURE...让我们逐行解释这段代码的含义： import { createFeatureSelector, MemoizedSelector } from '@ngrx/store'; 这行代码导入了 @ngrx...返回的选择器类型是 MemoizedSelector，这里指定了 StateWithCms 作为整个应用状态树的类型，CmsState 作为我们想要选择的特定...而返回的 getCmsState 就是这个 MemoizedSelector。...总结来说，以上代码演示了如何使用 @ngrx/store 库来创建 MemoizedSelector，用于从 Redux 状态树中选择特定 feature 下的状态片段。

1362 0

NgRx Store里的StoreModule.forRoot()

NgRx Store是为了管理整个应用的全局状态而设计的，如果想管理局部Component状态或者临时状态，请使用NgRx ComponentStore. ?...状态迁移并不会修改原始状态，而是借助三个点 … 即spread操作符，返回新的state对象。Spread 操作符会从当前state变量里拷贝属性，生成新的对象引用。...StoreModule.forRoot 为应用注册全局的服务提供者，包括注入到Component里的Store服务，以及用于dispatch actions的service以及选择state片段的服务。...这么做的动机是，selectors是纯函数，因此相同的输入一定会产生相同的输出，所以ngRx把每次输入以及输出都缓存起来，如果下次调用selector的输入在缓存里有记录，即从缓存里返回输出数据，以提高性能...返回类型为MemoizedSelector，即带有记忆功能的selector. createSelector的输入参数，以及返回的类型仍然是selector: ?

8472 0

什么是 @ngrxstore 开发包中的 MemoizedSelector

它是 @ngrx/store 的一个关键特性，通过使用 reselect 库来实现对状态选择器的优化。...选择器允许我们在应用中组织和重用状态的读取逻辑。 @ngrx/store 中的选择器分为两类：普通选择器（Selector）：每次调用时都会计算和返回新的结果。...Memoized 选择器（MemoizedSelector）：使用 reselect 库实现的选择器。Memoized 选择器会缓存计算结果，并在相同的输入条件下直接返回缓存的结果，而不会重新计算。...的标识符作为参数，并返回一个选择器函数。...Memoized 选择器将根据输入条件进行状态选择，并返回缓存的结果或者进行计算后返回结果。

1522 0

深入理解 ngrx effect 背后的工作机制

NgRx 确保操作首先由 reducer 处理，之后它们最终会被 effect 拦截。 Reducer 处理 action，然后被 effect 解析。...state 是应用程序存储数据的地方。...最终返回一个新的 Observable，类型为 B....很明显，这个函数就是一个状态机，基于当前状态和输入的 action(可以理解成指令，触发状态迁移的指令)，返回新的状态。...Store 并不存储数据，只是一个中间件。

1K3 0

如何确认 SAP Spartacus SSR Transfer State 已经正常工作了

在检查一些客户项目时，我注意到一旦返回 SSR 响应，浏览器仍然会执行页面和组件的 XHR 请求。...{ keys: { [CMS_FEATURE]: StateTransferType.TRANSFER_STATE }, }, }, }), 在返回的...RoutingConfig>{ loadStrategy: RouteLoadStrategy.ONCE, }), Chrome 开发者工具 console 面板，出现如下错误消息： @ngrx...RouteLoadStrategy.ONCE }, }), 在 Spartacus 2.0 版之前，实现状态持久化的唯一方法是使用一种简单的声明性机制，称为 storageSync，它允许您提供属性键以在存储中持久化...为了防止对已经在服务器上填充的状态进行不必要的后端调用，Spartacus 将 NgRx 状态的一部分包含在服务器端呈现的 HTML 中。

1.4K2 0

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

NgRX Store 将状态建模为 Store 内的单个简单 JavaScript 对象。状态是不可变的或只读的。这意味着没有直接的 Store API 来更改 Store 内的状态对象。...这种状态对象的一个例子可以表示为： const state = { developer: [] }; Store 里存储着很多应用状态的切片，称之为 State....在这种情况下，type 属性是 ADD_DEVELOPER，这意味着正在调度一个操作以添加存储在该操作的有效负载属性中的新 Developer 对象。...有效负载只是与reducer 添加到返回给Store 订阅者的新状态的操作类型相关的数据。...Reducers 响应动作并返回一个新的状态对象，其中包含状态内的所有更改，因此状态的不可变性质。

1.3K2 0

SAP Spartacus 如何连接到其他系统

后端数据存储在由状态管理系统提供的中央数据存储中。斯巴达克斯使用 NgRx。状态管理系统的复杂性被外观层隐藏，为组件开发人员提供简单的 API。...Facade 层：Facade 层隐藏了内存数据存储（NgRx）的复杂性。该层旨在简化您的开发，让您专注于自定义视图逻辑。内存存储：Spartacus 使用 NgRx 存储进行状态管理。...NgRx 被认为是复杂的，建议您使用 Facade 层。后端连接器：后端连接器由 NgRx effect 调用，并在所需的 UI 模型中返回来自后端的响应。...转换器是可选的：当没有找到给定域的转换器时，将返回源数据。此外，每当后端模型等于 UI 模型时，或者在简单转换的情况下，适配器都可以轻松处理。...例如，所有端点都有一个可选的字段参数，用于确定返回的响应数据。虽然此配置也可由（JAVA Spring）后端配置驱动，但在前端运行时执行此操作可提供更大的灵活性，并限制后端的自定义。

1.9K4 0

一个基于ngrx的计数器例子

(1) 定义action 从@ngrx/store导入Action，新建一个Action的子类： ?...(2) 实现reducer，根据不同的action type，返回不同的store store要存储的业务数据也定义在reducer里，当然也可以在单独的State.ts文件里实现： ?...reducer函数就是一个有限状态机，根据当前的状态和传入的action类型，返回新的状态： ? 有了action和reducer，应用程序还无法直接消费，需要通过Selector暴露。...import {createFeatureSelector, createSelector} from '@ngrx/store'; 首先创建一个MemoizedSelector，使用API createFeatureSelector...最后一个步骤，在app module里从@ngrx/store导入StoreModule: ?

9142 0

如何编写第一个 ngrx Effect 类

元数据用于注册订阅存储的流。从 effect 流返回的任何操作都会被分派回 Store。使用可管道化的 ofType 运算符过滤操作。...effects 实现例子： import { Injectable } from '@angular/core'; import { Actions, createEffect, ofType } from '@ngrx...MoviesService#getAll() 方法返回一个 observable，该 observable 将电影映射到成功的新 action，如果发生错误，当前返回一个空的 observable。...下面是 app.module.ts 的例子： import { EffectsModule } from '@ngrx/effects'; import { MovieEffects } from '....例子： import { EffectsModule } from '@ngrx/effects'; import { MovieEffects } from '.

2K2 0

聊聊 SAP 产品 UI 上的消息显示机制

NgRx 是 Angular 基于 RxJs 的一个响应式状态管理库，包含下列核心概念，Jerry 会结合 SAP Commerce Cloud UI 对 NgRx 的实际使用情况来举例说明。...：接收类型为 POST_PRODUCT_REVIEW 的 Action(第46行)，调用前文介绍的 Connector，向 Commerce 后台发起 OCC API 调用(第49行)，根据 API 返回结果...分别投递评论保存成功或失败的 Action： PostProductReviewSuccess(第53行) PostProductReviewFail(第56行) Store：Angular 应用维护在内存中的存储结构...下图的 ProductReviewsReducer 接收到该 Action，从其 payload 中解析出实际评论数据并返回。...这些返回的数据会被 NgRx 框架接收，并合并到 Store 中去。 Selector：纯函数，作为应用程序从 NgRx Store 中读取最新数据的接口。

2.2K3 0

SAP Spartacus 用户认证的实现

用户登录后，Commerce Cloud 确认用户credentials之后，返回Access Token，接下来该登录用户调用的所有OCC API，都使用该Access Token来完成。...在3.0之前，这些token存储在NgRx store里，到了3.0，有专门的服务用于存储数据。...因为我们使用的开源angular-oauth2-oidc，需要相应的存储机制采取类似localStorage或者SessionStorage的工作方式来配合，因此在3.0里，我们从NgRx切换成了支持Stream...AuthStatePersistenceService 负责将token，用户ID等认证后返回的信息，同步到浏览器存储介质里。 ?...当然，如果不用Commerce Cloud默认的OAuth认证服务器，就可以选择切换到其他OAuth 认证 flow去。

1.6K1 0

SAP Spartacus 单元测试开发规范

伪造组件必须与您要伪造的子组件具有相同的选择器：例子： @Component({ template: '', selector: 'cx-some-component' }) class MockSomeComponent...declarations: [MockSomeComponent], providers: [ ... ], }).compileComponents(); NGRX...and Tests That Use the Store 事实证明，模拟 NGRX 商店是一项相当大的挑战。...NGRX 存储是我们单元测试中模拟依赖项规则的例外。要对从 store 读取的一段代码执行单元测试，请通过使用数据显式调用相关成功操作来填充 store 以设置测试。

1.7K3 0

SAP 电商云 Spartacus UI Store 相关的设计明细

selector：场景2：使用 StoreModule.forFeature 注册 store：当使用 createSelector 和 createFeatureSelector 函数时，@ngrx.../store 会跟踪调用选择器函数的最新参数。...因为选择器是纯函数，所以当参数匹配时可以返回最后一个结果，而无需重新调用选择器函数。这可以提供性能优势，特别是对于执行昂贵计算的选择器。...它为状态的特征切片(Feature Slice)返回一个类型化(typed)的选择器函数。注意 createFeatureSelector 的调用有两种写法。...的类型必须和 2 的类型一致： 2 的位置其实就是 result 的位置：写法2 import { createSelector, createFeatureSelector } from '@ngrx

3992 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭