首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何通过@ngrx/store按ID存储同一状态的多个版本?

@ngrx/store是一个用于状态管理的库,它基于Redux架构。它提供了一种方便的方式来管理应用程序的状态,并且可以通过ID存储同一状态的多个版本。

要通过@ngrx/store按ID存储同一状态的多个版本,可以使用实体状态管理模式。该模式允许我们为每个实体创建一个状态片段,并根据其唯一ID进行存储和检索。

以下是一种实现方式:

  1. 创建一个实体状态接口,该接口定义了实体的属性和方法。例如:
代码语言:typescript
复制
interface EntityState<T> {
  ids: string[];
  entities: { [id: string]: T };
}
  1. 在应用程序的状态中,为每个实体创建一个状态片段。例如,如果我们有一个名为"User"的实体,可以创建一个名为"user"的状态片段:
代码语言:typescript
复制
interface AppState {
  user: EntityState<User>;
}
  1. 在@ngrx/store中,使用createEntityAdapter函数创建一个实体适配器。该适配器提供了一组用于操作实体状态的方法。例如:
代码语言:typescript
复制
import { createEntityAdapter, EntityState } from '@ngrx/entity';

const userAdapter = createEntityAdapter<User>();
  1. 在reducer中,使用适配器的初始状态和reducer函数来处理每个操作。例如,处理添加用户的操作:
代码语言:typescript
复制
import { createReducer, on } from '@ngrx/store';
import { addUser } from './user.actions';

export const initialState: EntityState<User> = userAdapter.getInitialState();

export const userReducer = createReducer(
  initialState,
  on(addUser, (state, { user }) => userAdapter.addOne(user, state))
);
  1. 在组件中,使用@ngrx/store的select函数来选择特定实体的状态。例如,选择ID为"1"的用户状态:
代码语言:typescript
复制
import { selectUserById } from './user.selectors';

const user = this.store.select(selectUserById('1'));

通过以上步骤,我们可以使用@ngrx/store按ID存储同一状态的多个版本。这种方法适用于需要管理多个实体的状态,并且可以根据实体的唯一ID进行检索和更新的场景。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 接入 NGRX 状态管理

注:图片来自ngrx.io/guide/store NGRX 是 Angular 实现响应式状态管理应用框架。...NGRX 状态管理生命周期图中包含了以下元素: Store:集中状态存储; Action:根据用户所触不同事件执行不同 Action ; Reducer:根据不同 Action 对 Store...中存储状态做出相应改变; Selector:用于获取存储状态切片纯函数; Effects:基于流实现副作用处理,以减少基于外部交互状态。...ng new angular-ngrx --standalone=false 安装 NGRX 核心模块: @ngrx/store状态管理核心模块,包含了状态存储、Actions、Reducers、Selectors...// 注入 Store constructor(private store: Store) {} } 让根组件实现 OnInit 接口,模拟场景通过 store 触发 action: export

24310
  • 一个Angular 5教程:一步一步指导实现你第一个Angular 5应用程序

    Angular CLI运行webpack dev服务器,该服务器将我们应用呈现在下一个空闲端口上(以便您可以在同一台机器上运行多个应用),并进行实时重新加载。...因此,它更像是一套约定(对于那些曾经听说过Ruby on Rails中约定优先配置用户,稍后会看到一些相似之处),以便我们回答我们应用程序应该如何决定它需要显示一些界面元素(如可折叠侧边栏),或者它应该在从服务器接收到它会话状态存储位置...让我们看看这是如何实现。我们讨论了State它不变性,这意味着我们在创建它之后不能改变它任何属性。这使得我们应用程序状态存储在我们系统中几乎不可能State。...为了改变应用程序状态,我们需要制作一些Action将会采用我们当前版本State并将其替换为新版本版本。...我们可以使用诸如ngrx-store-localstorage之类东西来存储我们数据到浏览器localStore,但是如何使用API​​呢?

    42.6K10

    前端架构101:MVC不足与Flux崛起

    这也和上一条「不可预测」相对应 响应顺序:如果存在多个对象响应同一个事件的话,有时候对响应顺序是有要求,某些变更不可以出现在其他变更之前 有条件响应:对于传播方而言,并非希望所有的时间都一视同仁广播出去...首先 AngularJS(AngularJS 代指 1.x 版本,Angular 代指 2 以及之后版本) 框架中也支持全局事件机制,比如 broadcast, emit 等等。...如果我想重复使用一个 view 的话,我需要保证我页面模版里有相同 id 元素,又必须保证上下文中有相同 model 层提供相同借口或者广播相同事件。...在我看来它们都拥有和 Flux 相同特征: 单向数据流 全局状态管理 store / selector / service 等概念抽象 在谈论 Flux 之前我们先给 Flux 定一个性:Flux...,如何用更少时间交付更高质量软件。

    1.4K20

    Structured Streaming 之状态存储解析

    端负责状态实际分片读写 状态分片 因为一个应用里可能会包含多个需要状态 operator,而且 operator 本身也是分 partition 执行,所以状态存储分片以 operatorId...里 Object 通用类型),可以 key 查询、或更新 状态版本 因为 StreamExection 会持续不断地执行批次,因而同一个 operator 同一个 partition 状态也是随着时间不断更新...、产生新版本数据 状态版本是与 StreamExecution 进展一致,比如 StreamExection 批次 id = 7 完成时,那么所有 version = 7 状态即已经持久化 批量读入和写出分片...(a) StateStore 在不同节点之间如何迁移 在 StreamExecution 执行过程中,随时在 operator 实际执行 executor 节点上唤起一个状态存储分片、并读入前一个版本数据即可...; 一个 executor 节点可以执行多个 operator,那么也就可以在一个 executor 上唤起多个状态存储分片(分别对应不同 operator + partition),如图示 executor

    1.3K30

    react-redux 开发实践与学习分享

    在各大框架中均可使用,当然各个框架也有自己再度封装状态管理库,如angularngrx,vuevuex,而本文主要介绍是reactreact-redux。 示例介绍 ?...开讲react-rudex 最初看文档时候,有一种体验,就是各个模块(action,reducer,store)等等,都看明白了,但是具体想去完成功能时候还是一脸懵逼,不知道如何下手,于是这次为了去更好讲解示例...关联rudex和页面组件-connect 从之前主页面的代码可以看到,错误信息显示是由组件props传进来,而主页面是如何获取相关props呢,答案是通过一个connect函数。...Defaults to false. store ? 这个就是之前一直提到redux仓库。redux管理数据都存储store中。...我们只需要知道,store就是一个存储仓库,react-redux只有一个store,所有的东西都存在这里,想要在react组件中用他首先需要去根页面把它注入进去。

    90130

    深度理解Vuex用法及实例讲解

    它采用集中式存储管理应用所有组件状态,并以相应规则保证状态以一种可预测方式发生变化。...Vuex原理 以下是一个表示“单向数据流”理念简单示意: 但是,当我们应用遇到多个组件共享状态时,单向数据流简洁性很容易被破坏: 多个视图依赖于同一状态。...来自不同视图行为需要变更同一状态。 对于问题一,传参方法对于多层嵌套组件将会非常繁琐,并且对于兄弟组件间状态传递无能为力。...通过定义和隔离状态管理中各种概念并通过强制规则维持视图和状态独立性,我们代码将会变得更结构化且易维护。这就是 Vuex 背后基本思想。...Vuex组成部分及作用 state.js 状态存储 mapState 辅助函数:当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。

    11210

    给2019前端开发你5个进阶建议~

    庆幸是除了 React 社区,Vue 社区有类似的 Vuex,Angular 社区有 NgRx 也提供了几乎同样能力,甚至 NgRx 还可以无缝使用 redux-devtools 来调试状态变化。...无论如何优化,始终要遵循 Redux 三原则: 原则 方法 引发问题 Single source of truth 组件 Stateless,数据来源于 Store 如何组织 Store?...是纯函数 副作用如何处理,大量样板代码 这三个问题我们是通过自研 iron-redux 库来解决,以下是背后思考: 如何组织 Action?.../SUCCESS/ERROR 这 3 个action,我们通过 FetchTypes 类型来自动生成对应到 3 个 action 如何组织 Store/Reducer?...reducer 和 view 不必一一对应,应用中同时存在组件树和状态树,按照各自需要去组织,通过 connect 来绑定状态一个或多个分支到组件树 通过构造一些预设数据类型来减少样板代码。

    1K10

    基于Kafka六种事件驱动微服务架构模式

    使用 Kafka 使导入过程更具弹性和可扩展性,因为多个服务可以处理来自同一个原始导入 http 请求作业。 使用 Kafka 复制,很容易将每个阶段都放在最合适数据中心和地理位置。...这将需要对数据库进行悲观/乐观锁定,因为同一用户可能同时有多个订阅扩展请求(来自两个单独正在进行请求)。 更好方法是首先向 Kafka 发出请求。为什么?...为了防止下游服务发生这种情况,他们需要存储重复数据删除状态,例如,轮询一些存储以确保他们之前没有处理过这个 Order Id。 这通常使用常见数据库一致性策略来实现,例如悲观锁定和乐观锁定。...原子存储确保所有作业完成事件将顺序处理。它通过创建一个“commands”主题和一个压缩store”主题来实现这一点。...顺序处理 在下图中,您可以看到原子存储如何以 [Import Request Id]+[total job count] 作为键生成每个新导入作业完成“更新”消息。

    2.3K10

    同样做前端,为何差距越来越大?

    庆幸是除了 React 社区,Vue 社区有类似的 Vuex,Angular 社区有 NgRx 也提供了几乎同样能力,甚至 NgRx 还可以无缝使用 redux-devtools 来调试状态变化。...无论如何优化,始终要遵循 Redux 三原则: ? 这三个问题我们是通过自研 iron-redux 库【1】来解决,以下是背后思考: 如何组织 Action?...如何组织 Store/Reducer?...reducer 和 view 不必一一对应,应用中同时存在组件树和状态树,按照各自需要去组织,通过 connect 来绑定状态一个或多个分支到组件树; 通过构造一些预设数据类型来减少样板代码。...另外 iron-redux 能接收到 Pont 接口响应数据格式,并推导出整个 Redux 状态静态类型定义,Store数据完美的类型提示。效果如下: ?

    1.2K20

    yarn节点属性及调度

    实际上,光有节点标签还不能满足一些复杂场景,比如同一个类型标签中不同NM节点,可能有不同环境信息,例如不同jdk版本、python版本、cpu型号等等。...实际任务调度时,需要在正确节点上运行,因此引入了节点属性,节点属性K=V形式设置,并且允许设置多个。..."yarn.node-attirbute.fs-store.impl.class"表示节点属性存储实现类,默认为`FileSystemNodeAttributeStore`。 2....,有如下需要注意地方: 同一个key不能赋多个值,也就是说,对同一个Key多次设置属性值,后面设置值覆盖前面设置值。...很多时候,为了提升性能,需要让同一个application中多个任务container运行在指定节点上,比如为了避免网络带宽带来损耗,让container之间具备亲和性(运行在同一节点上)。

    1K10

    Vue3学习笔记(七)—— 状态管理、Vuex、Pinia

    下面是“单向数据流”这一概念简单图示: 然而,当我们有多个组件共享一个共同状态时,就没有这么简单了: 多个视图可能都依赖于同一状态。 来自不同视图交互也可能需要更改同一状态。...以下是一个表示“单向数据流”理念简单示意: 但是,当我们应用遇到多个组件共享状态时,单向数据流简洁性很容易被破坏: 多个视图依赖于同一状态。 来自不同视图行为需要变更同一状态。...更重要是,我们如何才能组合多个 action,以处理更加复杂异步流程?...2.8.5、模块重用 有时我们可能需要创建一个模块多个实例,例如: 创建多个 store,他们公用同一个模块 (例如当 runInNewContext 选项是 false 或 'once' 时,为了在服务端渲染中避免有状态单例...) 在一个 store 中多次注册同一个模块 如果我们使用一个纯对象来声明模块状态,那么这个状态对象会通过引用被共享,导致状态对象被修改时 store 或模块间数据互相污染问题。

    3.9K10

    6种事件驱动架构模式

    这将需要数据库上悲观 / 乐观锁定,因为同一用户同一时间可能有多个订阅续期请求(来自两个单独正在进行请求)。 更好方法是首先生成 Kafka 请求。为什么?...为了防止下游服务出现这种情况,它们将需要存储去重后状态,例如,轮询一些存储以确保它们以前没有处理过这个 Order Id。 通常,这是通过常见数据库一致性策略实现,如悲观锁定和乐观锁定。...通过这种方式,这项工作可以在 Contacts Importer 服务多个实例中并行。但是,当导入工作被拆分为许多较小作业时,该如何知道何时通知最终用户所有的联系人都已导入?...原子存储确保所有作业完成事件将顺序处理。它通过创建一个“Commands”主题和一个“Store”压缩主题来实现。  ...顺序处理 从下图可以看出,原子存储如何生成每一条新 Import-job-completed“更新”消息,并以 [Import Request Id]+[total job count] 作为键。

    2.5K20

    聊聊事件驱动架构模式

    这将需要数据库上悲观/乐观锁定,因为同一用户同一时间可能有多个订阅续期请求(来自两个单独正在进行请求)。...为了防止下游服务出现这种情况,它们将需要存储去重后状态,例如,轮询一些存储以确保它们以前没有处理过这个 Order Id。 通常,这是通过常见数据库一致性策略实现,如悲观锁定和乐观锁定。...通过这种方式,这项工作可以在 Contacts Importer 服务多个实例中并行。但是,当导入工作被拆分为许多较小作业时,该如何知道何时通知最终用户所有的联系人都已导入?...原子存储确保所有作业完成事件将顺序处理。它通过创建一个“Commands”主题和一个“Store”压缩主题来实现。...顺序处理 从下图可以看出,原子存储如何生成每一条新 Import-job-completed“更新”消息,并以[Import Request Id]+[total job count]作为键。

    1.5K30

    基于HBase大数据存储应用场景分析

    因为HBase可以根据Rowkey提供高效查询,所以如果你数据(包括元数据、消息、二进制数据等)都有着同一个主键,或者你需要通过键来访问和修改数据,使用HBase是一个很好地选择。...Time Stamp 在HBase每个cell存储单元对同一份数据有多个版本,根据唯一时间戳来区分每个版本之间差异,不同版本数据按照时间倒序排序,最新数据版本排在最前面。...如果当一个表格很大,并由多个CF组成时,那么表数据将存放在多个Region之间,并且在每个Region中会关联多个存储单元(Store)。...这里我们需要特别注意,每一个Region都只存储一个Column Family数据,并且是该CF中一段(Row 区间分成多个Region)。...每个Region包含着多个Store对象。每个Store包含一个MemStore,和一个或多个HFile。MemStore便是数据在内存中实体,并且一般都是有序

    2.9K70

    如何优雅地解决多个 React、Vue 应用之间状态共享

    所以我们面临问题以及最终目的就是解决多个 React 应用之间状态共享: 某个状态需要在多个挂载在页面不同 DOM 节点业务组件间共享(访问 + 更新) 某组件内交互需要触发其他组件状态更新 解决方案...一、将状态挂载在全局 window 对象、EventEmitter 触发更新 使用类继承 EventEmitter 通过在类中申明公共变量来进行存储和共享数据,使用事件订阅发送方式来实现数据共享以及更新...addCount:() => void } } // 通过继承 EventEmitter class 中声明 store存储数据 export class MyEmitter extends...然后接着解决如何保证在同一颗 React Tree 前提下将不同业务组件挂载在不同 DOM 节点。 再简单说明一下我们现在需要解决问题。...事件冒泡正常工作 —— 通过将事件传播到 React 树祖先节点,事件冒泡将预期工作,而与 DOM 中 Portal 节点位置无关。

    2K20

    开发篇-MySQL分区(一)

    MySQL从5.1版本开始支持分区功能。分区是指根据一定规则,数据库把一个表分解成多个更小、更容易管理部分。...对于已经过期或者不需要保存数据,可以通过删除与这些数据有关分区来容易删除数据。 跨多个磁盘来分散数据查询,获得更大查询吞吐量。...在MySQL 5.1版本中,同一个分区表所有分区必须使用同一存储引擎;即同一个表上,不能对一个分区使用MyISAM引擎,对另一个分区使用InnoDB;但是,可以在同一个MySQL服务器中,甚至同一个数据库中...无论是哪种MySQL分区类型,要么分区表上没有主键/唯一键,要么分区表主键/唯一键都必须包含分区键,也就是说不能使用主键/唯一键字段之外其他字段分区,例如 emp表主键为id字段,在尝试通过 store_id...例如雇员表emp 中商店ID store_id 进行RANGE分区: mysql> CREATE TABLE emp ( -> id INT NOT NULL, -> ename VARCHAR

    1.2K71

    必须要会 50 个React 面试题(下)

    Store 38. 你对“单一事实来源”有什么理解? Redux 使用 “Store” 将程序整个状态存储同一个地方。...因此所有组件状态存储Store 中,并且它们从 Store 本身接收更新。单一状态树可以更容易地跟踪随时间变化,并调试或检查程序。 39. 列出 Redux 组件。...Store – 整个程序状态/对象树保存在Store中。 View – 只显示 Store 提供数据。 40. 数据如何通过 Redux 流动? ?...因此,Redux 非常简单且是可预测。我们可以将中间件传递到 store 来处理数据,并记录改变存储状态各种操作。所有操作都通过 reducer 返回一个新状态。 44....Store 包含状态和更改逻辑 1. Store 和更改逻辑是分开 2. 有多个 Store 2. 只有一个 Store 3. 所有 Store 都互不影响且是平级 3.

    3.5K21
    领券