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

当ngrx存储状态包含Map时,为什么无法识别对此Map的更改?

当ngrx存储状态包含Map时,无法识别对该Map的更改的原因可能是因为ngrx默认使用的是浅比较(shallow comparison)来检测状态的变化。浅比较只会比较对象的引用,而不会比较对象的内容。因此,当对Map对象进行更改时,虽然对象的引用没有发生变化,但对象的内容已经发生了变化,ngrx无法检测到这个变化。

为了解决这个问题,可以使用ngrx提供的深比较(deep comparison)来检测状态的变化。深比较会递归地比较对象的内容,而不仅仅是比较对象的引用。这样,当对Map对象进行更改时,ngrx就能够正确地识别到这个变化。

在ngrx中使用深比较可以通过自定义比较函数来实现。比较函数可以通过实现isEqual方法来定义,该方法接受两个参数,分别是前一个状态和当前状态,返回一个布尔值表示两个状态是否相等。在比较函数中,可以使用深比较算法来比较Map对象的内容。

以下是一个示例的比较函数的实现:

代码语言:typescript
复制
import { isEqual } from 'lodash';

function mapComparer(prevState: Map<any, any>, currentState: Map<any, any>): boolean {
  return isEqual(Array.from(prevState), Array.from(currentState));
}

在使用ngrx存储状态时,可以将这个比较函数传递给createReducer函数的stateComparer参数,以便使用深比较来检测状态的变化。

关于ngrx的更多信息和使用方法,可以参考腾讯云提供的ngrx相关产品和文档:

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

相关·内容

Angular 接入 NGRX 状态管理

NGRX 状态管理生命周期图中包含了以下元素: Store:集中状态存储; Action:根据用户所触不同事件执行不同 Action ; Reducer:根据不同 Action 对 Store...中存储状态做出相应改变; Selector:用于获取存储状态切片纯函数; Effects:基于流实现副作用处理,以减少基于外部交互状态。...NGRX 状态管理中包含了两条变更状态主线: 同步变更状态:用户 => Action => Reducer => Store(State); 异步变更状态:用户 => Action => Effects...ng new angular-ngrx --standalone=false 安装 NGRX 核心模块: @ngrx/store:状态管理核心模块,包含状态存储、Actions、Reducers、Selectors...schematics"] } } 创建存储 State Store: 选项介绍: 选项 作用 --root 目标模块为根模块设置 --module 提供目标模块路径 --state-path

23810

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

反应角 - Ngrx 让我们来谈谈我们应用程序状态,我意思是我们应用程序所有属性,它们字面定义其当前行为和状态。...让我们看看这是如何实现。我们讨论了State它不变性,这意味着我们在创建它之后不能改变它任何属性。这使得我们应用程序状态存储在我们系统中几乎不可能State。...让我们再往前走一步,并确保如果我们应用程序状态包含多种类型数据,我们从每种类型单独孤立状态进行组合。...请记住,我们正好将Firebase集成到我们应用程序中。现在它由于高度可维护Ngrx商店而丢失了。也就是说,它存储在任何地方。...就像任何新框架一样,要做到这一点,唯一方法就是继续练习。希望你已经了解了Angular强大。您准备好继续,Angular文档是一个很好资源,并且附带了关于高级技术整个部分。

42.6K10
  • angular4实战(4)ngrx

    本次演示示例为通过ngrx状态管理来控制HTTP请求服务全局loading动画显示。...同react-redux 相似,ngrx核心也是通过reducer来获取储存在store中值(状态),通过action来改变store中值(状态)。...example,将ngrx状态管理,通过不同环境来托管。...ChangeDetectionStrategy 组建变化检查策略,以上述代码为例,为ChangeDetectionStrategy设置OnPush,组件就不会一直进行脏检查了,而是输入属性变化时...高中英语水平翻译一下:async这个管道,会返回订阅Observe ,promise对象最新值,观察者发现值有改变,就会触发组件检查策略,并且在组件销毁也会自动去取消订阅避免内存泄漏。

    1.1K30

    Java并发BUG基础篇

    使用线程安全对象 共享对象 线程主要通过共享对相同对象访问进行通信。因此,在对象变化时读取可能会产生意外结果。同样,同时更改对象可能会使它处于不一致状态。...避免此类并发问题编写可靠代码主要方法是使用不可变对象,因为它们状态无法通过多线程干扰进行修改。 但是,我们不能总是使用不可变对象。在这些情况下,我们必须找到使可变对象成为线程安全方法。...集合类线程安全 像任何其他对象一样,集合在内部维护状态。这可以通过多个线程同时更改集合来更改。...SimpleDateFormat类在执行操作时会更改其内部状态。 我们需要非常小心,因为它们不是线程安全。由于竞争条件等原因,它们状态在多线程应用程序中可能变得不一致,从而导致BUG发生。...竞争条件 两个或多个线程访问共享数据并且它们试图同时更改它们,就会发生竞争状态。因此,竞争条件可能导致运行时错误或意外结果。

    44420

    15个 Vue.js 高级面试题

    提供唯一键值 IS ,将根据对键更改对元素进行重新排序(并且不使用新数据对它们进行修补),如果删除了 key(例如,删除列表中项目),则对应元素节点也被销毁或删除。 请注意下图: ?...这是因为 Vue 无法识别组件编号 3,它只是重新修补它所看到更新数据,即 span 标签内容。...尽管 v-for 指令在基于 HTML 模板中起作用,但是使用渲染函数,可以简单地用标准 .map() 函数遍历 fruits 数据数组。 10....在大型 Vue 程序中管理状态推荐方法是什么?为什么程序在功能和代码方面不断增长状态管理会变得困难,并且使用无穷无尽下游网络 prop 和上游事件当然不是明智决定。...组件将 Vuex 用作响应性数据存储,并在状态更新进行更新。多个或者不相关组件可以依赖于相同中央存储。 在这种情况下,Vue 充当纯 View 层。

    3K20

    从一道面试题引发原理性探究

    diff 算法过程中,先会进行新旧节点首尾交叉对比,无法匹配时候会用新节点 key 与旧节点进行比对,从而找到相应旧节点. 你以为这样回答,面试官就能放过你。...所以会更加准确,如果不加 key,会导致之前节点状态被保留下来,会产生一系列 bug。 为什么更快速?...key 唯一性可以被 Map 数据结构充分利用,相比于遍历查找时间复杂度 O(n),Map 时间复杂度仅仅为 O(1)。 为什么 Map 数据结构会更快?...与使用内联缓存(IC)系统进行任何其他属性查找一样,V8 还可以优化哈希码符号查找,从而为哈希码提供非常快速查找。键具有相同隐藏类,这对于单态内联缓存查找非常有效。...但是,对于那些没有添加到哈希表中对象,这会浪费内存。相反,我们可以尝试将散列码存储在元素存储或属性存储中。 元素存储是一个包含其长度和所有元素数组。

    1.5K20

    总结了一些vue相关题目,话说今年前端面试难度好大

    一个组件没有声明任何 prop ,这里会包含所有父作用域绑定 ( class 和 style 除外 ),并且可以通过 v-bind="$attrs" 传入内部组件。...“store” 基本上就是一个容器,它包含着你应用中大部分状态 ( state )。Vuex 状态存储是响应式。...Mutation:是唯一更改 store 中状态方法,且必须是同步函数。Action:用于提交 mutation,而不是直接变更状态,可以包含任意异步操作。...一个组件没有声明任何 prop ,这里会包含所有父作用域绑定 ( class 和 style 除外 ),并且可以通过 v-bind="$attrs" 传入内部组件。...“store” 基本上就是一个容器,它包含着你应用中大部分状态 ( state )。Vuex 状态存储是响应式

    88960

    【干货】你想了解BGP问题都在这里了

    19、为什么两次看到同一个路由从BGP同一对等体? 例如: ? 两个条目被看到归结于配置软重新配置。非限定路径和已修改路径,在前缀路径表里取决于Inbound政策,如果允许,存储。...32、为什么有没有统计信息结果,当我使用debug bfd事件和debug bfd信息包命令? 它是正常行为,bfd hello在子最小秒钟发送,并且,万一运行该调试,路由器不能处理。...它捕获BFD事件类似会话状态更改,远程终端触发由本地CLI或会话配置配置更改。 debug bfd数据包 此命令启用BFD数据包记录日志所有当前配置BFD会话。...它只获取被交换BFD Hello数据包,有bfd配置更改类似更改发生会话状态。正常BFD数据包没有由此命令捕获。 33、在新BGP邻居最大前缀配置后,路由器是否必须被重新启动?...AS路径加在前面设置, AS编号将被加在前面被添附到AS路径,并且,更新离开往eBGP对 等体AS,本地AS编号被加在前面到完整AS路径。

    2.6K30

    常见c和cpp面试题目汇总(一)

    在原来空间不够存储新值,每次调用push_back方法都会重新分配新空间以满足新数据添加操作。如果在程序中频繁进行这种操作,还是比较消耗性能。...unordered_mapmap类似,都是存储key-value对,可以通过key快速索引到value,不同是unordered_map不会根据key进行排序。...unordered_map底层是一个防冗余哈希表,存储根据keyhash值判断元素是否相同,即unoredered_map内部是无序。 十三、 构造函数为什么一般不定义为虚函数?...对象动态类型可变,静态类型无法更改 2)静态绑定和动态绑定 静态绑定:绑定是对象静态类型,函数依赖于对象静态类型,在编译期确定 动态绑定:绑定是对象动态类型,函数依赖于对象动态类型,在运行期确定...调用拷贝构造函数情形: 1)用类一个对象去初始化另一个对象时候 2)函数参数是类对象,就是值传递时候,如果是引用传递则不会调用 3)函数返回值是类对象或者引用时候 举例: #include

    1.4K31

    【译】怎样修改 HashMap Key?

    概述 在 Java 中,HashMap 是一个广泛使用数据结构,它以键值对形式存储元素,提供快速数据访问和检索。有时,在使用 HashMap ,我们可能想要修改现有条目的键。...这是因为 HashMap 中键对象用于计算一个哈希码,该哈希码决定了相应值将被存储在哪个桶中。如果键是可变并且在被用作 HashMap 中键之后被更改,哈希码也可以更改。...(myMap.containsKey(kai)); assertFalse(myMap.containsKey(eric)); 如上面的测试所示,更改 kai 名字为 “Eric” 后,我们无法再使用...HashMap 维护一个内部哈希表来存储添加到 map哈希码。一个哈希码引用一个 map 条目。...所以,哈希码是基于字符串“Kai”计算。HashMap 存储了结果,让我们说 “hash-kai”,在哈希表中。后来,我们将 kai(“Kai”) 更改为 kai(“Eric”)。

    71731

    (转)JAVA HashSet 去除重复值原理

    在HashSet中,基本操作都是有HashMap底层实现,因为HashSet底层是用HashMap存储数据。...向HashSet中添加元素时候,首先计算元素hashcode值,然后用这个(元素hashcode)%(HashMap集合大小)+1计算出这个元素存储位置,如果这个位置位空,就将元素添加进去;...* @return 对此set中元素进行迭代Iterator。        ...* 更确切地讲,且仅当此set包含一个满足(o==null ? e==null : o.equals(e))        * e元素,返回true。        ...如果此set已包含该元素,则返回true        * (或者:如果此set因调用而发生更改,则返回true)。(一旦调用返回,则此set不再包含该元素)。

    1.6K21

    Ceph架构概览

    crush可以识别osd存储介质和水平组织node、racks、rows等不同域.crush算法可以把数据对象存储在不同域,防止osd失效。...osd宕机,osd宕机,集群状态改变了,采用副本或者EC。...ceph进程处理crush rule,会识别出主osd,ceph客户端会直接和主osd进行连接,读写主osd中pg中数据对象 Ceph读写操作是什么样流程?...osd加入到集群,osd会上报自身状态给montior,一般osd会有up和down状态来反应osd是否是运行正常和客户端是否可以从这个osd请求数据。...添加新osd到集群,cluster map会更新,cluster map更新也就以为需要改变数据对象存储位置,这是cluster map更改,导致由于crush算法计算输入变化了。

    1.3K20

    H2 存储内核解析

    如果map条目被更改、删除或添加,则会复制相应页面 (page)并在下一个chunk中存储修改后页面 (page)。...如果 map条目被更改、删除或添加,则相应页面(page)将被复制、修改并存储在下一个 chunk 中,旧 chunk 中活动页面(page)数将减少。...这种机制被称为写复制,类似于 Btrfs 文件系统工作方式。那些没有活动页面的 chunks 被标记为空闲状态,因此空间可以被最近 chunks 重复使用。...写入下一个chunk并且前一个预测是不正确,文件头也会更新。在任何情况下,如果下一个链跳数超过20次,则文件头将被更新。...这样,只需要一个读取操作即可读取页面(page)(除非是非常大页面)。所有页面(page)最大长度之和存储在chunk元数据中(字段“max”),将页面标记为已删除,会调整实时最大长度。

    57170

    whale系统实战开篇,聊聊用户认证

    所以我们只能在服务器中存储一份用户登录信息,这份登录信息会在响应时候传给浏览器,并且告诉其保存为cookie,以便下次请求时候发送给我们应用,这样我们应用就识别了请求来源于哪个用户,这也就是传统...聊聊这种方式短板。 每次认证用户发起请求,服务器需要去创建一个记录来存储信息。越来越多用户发请求,内存开销也会不断增加。虽然说中间件可以缓解这个问题。...在服务端内存中使用Seesion存储登录信息,可扩展性会比较差。 开放平台商业理念开始走向主流,显然cookie以及session都无法很好处理授权管理。...大致流程如下, ? session存储 聊聊这种方式相对于传统session优势。 无状态、可扩展:在客户端存储 token 是无状态,并且能够被扩展。...例如,能将一个博客帐号和自己QQ号关联起来。通过一个 第三方平台登录QQ,我们可以将一个博客发到QQ平台中。 使用 token,可以给第三方应用程序提供自定义权限限制。

    60030

    Devtools 老师傅养成 - Sources 面板

    七种断点类型 行断点:代码运行到当前行之前暂停执行 在源代码添加debugger关键字 或者点击Sources面板中源代码行号 条件行断点:满足条件才会触发该断点 右击Sources面板中源代码行号...没有可步入代码,就会执行 step over) long resume:恢复执行,并将断点停用 500ms Continue to here:继续执行至此行 Restart Frame:重新执行函数调用堆栈中某一帧...folder to workspace,将你本地运行站点相关源文件添加到 Devtools 工作区,会自动识别 Page 下和工作区下相对应文件,在 devtools 更改文件并保存,即持久化保存...更多关于 source map 介绍[7] Local Overrides 用于覆盖网络请求: 在source/page右键save for override或直接edit,保存文件都被存储到overrides...(与插件运行在服务端脚本,页面上引用脚本,页面上 script 中内嵌脚本都不同 插件在服务端脚本可以访问所有 WebExtension JavaScript API,但它们无法直接访问网页内容

    1.8K31

    21个Java Collections面试问答

    6、为什么Map接口没有实现Collection接口? 尽管Map接口及其实现是Collections Framework一部分,但Map不是集合,集合也不是Map。...迭代器允许调用者从基础集合中删除Enumeration无法实现元素。迭代器方法名称已得到改进,以使其功能更清晰。 9、为什么没有像Iterator.add()这样方法将元素添加到集合中?...该集合由Map支持,因此对Map更改会反映在集合中,反之亦然。如果在对集合进行迭代修改了映射(通过迭代器remove操作除外),则迭代结果不确定。...Collection values():返回此映射中包含Collection视图。集合由Map支持,因此对Map更改会反映在集合中,反之亦然。...Set > entrySet():返回此映射中包含映射Set视图。该集合由Map支持,因此对Map更改会反映在集合中,反之亦然。

    2K40

    不用多进程Python十倍速并行技巧(上)

    缺少状态计算抽象(即无法在单独“任务”之间共享变量)。 Ray是一个快速、简单框架,用于构建和运行解决这些问题分布式应用程序。...这里提供了运行所有基准代码。这篇文章中包含了缩写代码片段。主要区别在于,完整基准包括1)计时和打印代码,2)预热Ray对象存储代码,以及3)使基准适应小型机器代码。...通过调用ray.put(image),大型数组存储在共享内存中,所有工作进程都可以访问它,而不需要创建副本。这不仅适用于数组,还适用于包含数组对象(如数组列表)。...工作人员执行f任务,结果再次存储在共享内存中。然后,脚本调用ray.get([…]),它创建由共享内存支持numpy数组,而无需反序列化或复制值。...前缀计数存储在actor状态中,并由不同任务进行更改。 本例使用Ray使用3.2秒,使用Python多处理使用21秒,使用串行Python使用54秒(在48个物理核心上)。

    1.9K20

    20道高频React面试题(附答案)

    为什么要用 Virtual DOM:(1)保证性能下限,在不进行手动优化情况下,提供过得去性能下面对比一下修改DOM真实DOM操作和Virtual DOM过程,来看一下它们重排重绘性能消耗∶真实...在当前组件 props中,包含 location属性对象,包含当前页面路由地址信息,在 match中存储当前路由参数等数据信息。可以直接通过 this .props使用它们。...(2)使用useState时候,使用push,pop,splice等直接更改数组对象坑使用push直接更改数组无法获取到新值,应该采用析构方式,但是在class里面不会有这个问题。...(5)不要滥用useContext可以使用基于 useContext 封装状态管理工具。React.Children.map和jsmap有什么区别?...方法更新state,就会触发视图重新渲染,完成表单组件更新受控组件缺陷: 表单元素值都是由React组件进行管理,有多个输入框,或者多个这种组件,如果想同时获取到全部值就必须每个都要编写事件处理函数

    1.8K10
    领券