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

存储更改时NgRx选择器不更新

是指在使用NgRx进行状态管理时,当存储中的数据发生变化时,相关的选择器(Selectors)没有自动更新。

NgRx是一个用于Angular应用程序的状态管理库,它基于Redux模式。它通过将应用程序的状态存储在一个单一的存储中心(Store)中,并使用纯函数来处理状态的变化,从而实现了可预测性和可维护性。

选择器是NgRx中的一个重要概念,它用于从存储中选择和转换数据。选择器可以帮助我们在组件中访问存储中的特定数据,并且可以进行数据转换和过滤。

当存储中的数据发生变化时,选择器应该自动更新以反映最新的数据状态。然而,如果选择器没有更新,可能是由于以下几个原因:

  1. 选择器的代码逻辑错误:请检查选择器的代码,确保它正确地选择和转换存储中的数据。确保选择器的输入参数与存储中的数据相关联,并且选择器的转换逻辑正确。
  2. 存储中的数据没有正确更新:请确保在对存储进行更改时,使用了正确的NgRx操作(如dispatch)来更新存储中的数据。如果没有正确地更新存储中的数据,选择器将无法检测到数据的变化。
  3. 选择器没有正确订阅存储的变化:请确保选择器正确地订阅了存储中的数据变化。在选择器的代码中,使用store.select()方法来订阅存储中的数据,并在回调函数中更新选择器的结果。
  4. 存储中的数据结构发生了变化:如果存储中的数据结构发生了变化,但选择器的代码没有相应地进行更新,选择器可能无法正确地选择和转换数据。请确保选择器的代码与存储中的数据结构保持一致。

对于解决存储更改时NgRx选择器不更新的问题,可以参考以下步骤:

  1. 检查选择器的代码逻辑,确保它正确地选择和转换存储中的数据。
  2. 确保在对存储进行更改时,使用了正确的NgRx操作(如dispatch)来更新存储中的数据。
  3. 确保选择器正确地订阅了存储中的数据变化,并在回调函数中更新选择器的结果。
  4. 如果存储中的数据结构发生了变化,确保选择器的代码与存储中的数据结构保持一致。

如果以上步骤都没有解决问题,可以考虑使用NgRx提供的调试工具来进一步分析和排查问题。NgRx提供了一些调试工具,如NgRx DevTools,可以帮助我们监视和调试存储中的数据变化。

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

  • NgRx官方文档:https://ngrx.io/
  • 腾讯云云原生产品:https://cloud.tencent.com/product/cloudnative
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 接入 NGRX 状态管理

NGRX 状态管理生命周期图中包含了以下元素: Store:集中的状态存储; Action:根据用户所触的不同事件执行不同的 Action ; Reducer:根据不同的 Action 对 Store...中存储的状态做出相应的改变; Selector:用于获取存储状态切片的纯函数; Effects:基于流实现的副作用的处理,以减少基于外部交互的状态。...--standalone=false 安装 NGRX 核心模块: @ngrx/store:状态管理核心模块,包含了状态存储、Actions、Reducers、Selectors; @ngrx/store-devtools...DelUser: emptyProps(), }, }); 增加用于添加用户的AddUser ,并使用 props 约束所接收的参数类型; 增加用于删除用户的DelUser,并使用emptyProps表示传递任何参数...(仅存储一位用户); 创建根据 Action 来更新状态的 Reducer: 选项介绍: 选项 作用 --reducers 执行reducers存放路径,约定路径为上一级的 index.ts,也是 store

24810

angular4实战(4)ngrx

https://blog.csdn.net/j_bleach/article/details/78161765 ngrx ngrx是angular的状态管理库,与...如下: ngrx地址:https://github.com/ngrx ngrx主要有四个模块,分别是 ngrx/store, ngrx/effects, ngrx/router-store..., ngrx/store-devtools 本次实例用的是ngrx 4.x版本,因为没有跟路由关联,也没有复杂的行为,只用到了ngrx/store。...ps:这里边个人理解是因为每一个简单类型的值,都会在新开栈上来存储,而对象不同,对象存在同一个指针的引用(是否可以类似深浅拷贝,这里打个问号); 一篇国外的文章帮助理解:https://blog.thoughtram.io...在本例中,如果把async这个过滤器取消的话,会造成一直loading,因为组件无法在监听到控制loading值的改变,也就无法更新视图了。

1.1K30
  • 给CSS加点料——Less(二)

    CSS中不能够定义变量,所以在很多元素互相依赖大小时,倘若需要改其中一个大小,我们就要从头改到尾,为了减少这个困扰,less引出了变量的概念,我们可以将值的大小定义为变量,直接在各处引用变量即可,需要更改时...想一想在使用css的时候,我们如果想定位到一个元素,就要通过各种选择器去定位,这就会有两个问题,要么起很多id、class名(浪费文采),要么通过各种子选择器、后代选择器等进行定位(浪费体力,还不减肉!...在嵌套过程中同html一样,我们通过缩进来表现层级关系,从而让我们容易去定位元素,debug啦。...&可以用来引用父级选择器。下面我们就来试试吧~ ♚ Have a Try! 下面我们就来试试吧~ 比如兔妞就写了一个这样的页面: <!...编译呀~上一篇说的的呀~(不过在下那是生活中,我们很少这样去编译,且不说有很多编译软件的存在,很多IDE中也是有编译插件的,或者通过webpack打包的工程我们是可以设置为热更新的,此为后话) lessc

    76520

    jQuery 最佳实践(译)

    myhtml += '' + item + ''; }); $('#ballers').html(myhtml); 元素上存数据 元素上存数据的模式和反模式 // 推荐...value); 上下文和查找 抓取元素时,推荐使用find而不是用上下文 例如 $('.a', $('.b')); $('.b').find('.a'); 移除 当要对某个元素内容做一些复杂的修改时...具体的选择器放右边,不具体的写左边 //推荐 $('div.data .brad') // 推荐 $('.data td.brad') jQuery的选择器是Sizzle是下向上来找匹配的元素的。...因此为了提高效率,使用具体的选择器放右边,不具体的写左边这种写法。 通用选择器 避免使用通用选择器(*) 这个主要是从查询效率上考虑。...选择器不用具体的过头 // 推荐 var arms = $('.data table.attendees td.brad'); // 推荐 var arms = $('.data td.brad');

    89430

    写在 2021: 值得关注学习的前端框架和工具库

    作者:林渡 https://juejin.cn/post/6935670539088461855 最近在知乎看到了这么个问题:学完Vue还有必要学习React和Node吗?...它对自己的定义也包含状态管理的字样,而是有穷状态机( finite state machines[5] )。暂时没有使用过,不做展开介绍。...你可能听过它不好的一面:笨重、学习成本高、断崖式更新..., 可能也听过它好的一面:不需要再自己挑选路由、状态管理方案、请求库等、依赖注入很香适合后端程序员快速上手...。...如果你打算Angular和Nest都学,我的建议是先学Nest,这样入门Angular的学习路线会平滑一点。...秉承了Angular的思想,提供了一整套的集成:和Angular Router的集成:@ngrx/router-store;对于集合类型的适配:@ngrx/entity;副作用管理:@ngrx/effects

    4.2K10

    写在2021: 值得关注学习的前端框架和工具库

    它对自己的定义也包含状态管理的字样,而是有穷状态机( finite state machines )。暂时没有使用过,不做展开介绍。...你可能听过它不好的一面:笨重、学习成本高、断崖式更新…, 可能也听过它好的一面:不需要再自己挑选路由、状态管理方案、请求库等、依赖注入很香适合后端程序员快速上手…。...也可以关注我的微信公众号:【前端留学生】 每天更新最新技术文章干货。...秉承了Angular的思想,提供了一整套的集成:和Angular Router的集成:@ngrx/router-store;对于集合类型的适配:@ngrx/entity;副作用管理:@ngrx/effects...,以及必不可少的schematics:@ngrx/schematics等,最大的优势是和RxJS的深度集成。

    2.9K10

    TDesign 更新周报(2022年9月第2周)

    module 导出不带样式产物,调整 lib 包内容,新增 cjs 产物支持 commonjs 导出不带样式产物 @HQ-Lin (#1493) FeaturesDatePicker: @HQ-Lin支持二次更改时选择器时可单次变更日期...chaishi (#1484)ImageViewer:新增 title属性,作为相册标题展示 @Ylushen (#1471)适配移动端展示 @HQ-Lin (#1480)DatePicker: 支持二次更改时选择器时可单次变更日期...chaishi (#1461)新增 triggerButtonProps 用于指定文件选择触发按钮风格 @chaishi (#1461) Bug FixesTreeSelect: 修复 data 异步更新...,input 值没有及时更新的问题 @HelKyle (#1481)Dropdown:优化dropdown样式细节 @uyarn (#1440)修复 value 缺失点击异常 @HelKyle (#1465...修复底部版权信息及面包屑导航垂直居中问题 by @zengqiu in Tencent/tdesign-vue-next-starter#299 Tencent/tdesign-vue-next-starter#298修复浏览器兼容页中浏览器推荐卡片遮挡页脚信息问题

    1.6K30

    Ext JS 教程-MVC架构 原

    目前 AM.view.user.List 组件创建了一个内置的存储。它工作得很好,但是我们乐于在应用程序的任何地方引用到那个存储,以便我们可以更新它里面的数据。...现在我们仅需要更新我们的存储区引用Model的名字,而不是提供内置的域… Ext.define('AM.store.Users', {     extend: 'Ext.data.Store',...在这个方法中,我们需要从表单中获取数据,更新我们的User,然后保存到我们在上面创建的Users存储中。...行了一条记录以后,updateUser.json 包含了 {“success”:true} 。它通过一个HTTP POST 指令被更新了,你可以通过创建一个空的文件避免收到一个404错误。...我们仅需要做出了另外一个更改时告诉我们的存储在编辑之后同步它自身,我们可以通过在updateUser方法里面额外添加一行代码来做到,现在就看起来像这样: updateUser: function(button

    3.3K10

    Galaxy Release (v 22.01),新的颜色选择器

    这里总结一下该版本一些主要的更新内容,为关注和从事 Galaxy 相关工作的中文用户提供参考。 重点更新 新的颜色选择器 你是否有使用像 Circos 这样需要颜色输入的工具?...,它已经更新,以指示 collections 集合是同类的(homogeneous)还是异类的(heterogeneous)。如果您不小心包含了一个不正确的数据集,这将帮助您容易地看出来。...用户首选项可以在 Galaxy Vault 中加密 Galaxy 系统现在可以配置为在外部保险库中存储秘密,这对于秘密管理的安全处理和集中化非常有用。...特别是,可以将用户配置文件”管理信息”部分的信息字段,如下拉框键,配置为在保险库 (Hashicorp、 Custos 或数据库)静止时加密,而不是在用户首选项表中以纯文本形式存储。...Pull Request 13233 FormNumber: 在 slider 滑块更改时通知值更改 (thanks to @davelopez).

    86440

    【网页前端】CSS样式表入门概述以及基本语法格式和选择器

    专栏介绍 【前端网页】 目前主要更新HTML,一起学习一起进步。...Sheets) :层叠样式表 层叠:一层一层叠加 样式表:存储样式的地方,多个样式 CSS 通常称为 CSS 样式或层叠样式表,主要用于设置 HTML 页面中的文本内容...CSS 可以使 HTML 页面更好看, CSS 色系的搭配可以让用户舒服, CSS+DIV 布 局更佳灵活,容易绘制出用户需要的结构。...CSS 作用:修饰 HTML 页面,丰富多彩地展示超文本信息 1.1入门案例 步骤 1 :创建一个 HTML 文件 步骤 2 :在 HTML 上创建一个标签 步骤 3 :标签中新增一个...注意:建议使用,会降低页面加载速度。 3.5 扩展:属性选择器 每个标签将来都会设置不同的属性及属性值, 我们可以通过标签的属性及属性值来将样式作用于特点标签上。

    57320

    9 个超实用的 JavaScript 原生插件工具

    Cypress允许你创建可以与单击按钮交互的测试,填写表格,这个很好地支持定期更新。...由于支持tree shaking,它是一个很棒的模块打包器,虽然不像Parcel或Webpack那样出名,但它仍然随着响应式更新而增长。...它的样板代码很少,因此你的代码看起来简洁,结构简洁。 5、jsdoc 地址:https://github.com/jsdoc/jsdoc ? 用于 JavaScript 的 API 文档生成器。...Ramda强调纯粹的函数风格,不变性和无副作用的函数是其设计理念的核心,帮助你用简洁优雅的代码完成工作。 这些函数是自动柯里化的,这使你不提供最终参数即可从旧函数构建新函数。...如果你正在使用 Angular 应用程序,建议使用 Akita,因为与ngrx和ngxs相比,它容易。

    1.2K20
    领券