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

Angular 8:使用ngRx/store从reducer获取的结果不会更新异步(html)中的UI

Angular 8是一种流行的前端开发框架,它使用TypeScript编写,并且具有强大的工具和功能,可以帮助开发人员构建现代化的Web应用程序。ngRx是Angular生态系统中的一个状态管理库,它基于Redux模式,用于管理应用程序的状态和数据流。

在Angular中使用ngRx/store从reducer获取的结果不会自动更新异步(html)中的UI的问题,可能是由于以下原因导致的:

  1. 异步操作未正确触发状态更新:确保在异步操作完成后,通过dispatch一个action来更新状态。这个action应该在reducer中被捕获,并且通过更新状态来触发UI的更新。
  2. 订阅状态的组件未正确更新:在组件中订阅状态时,确保使用了Angular的ChangeDetection策略,并且在状态更新时,Angular能够检测到变化并更新UI。可以尝试使用ChangeDetectorRef来手动触发变化检测。
  3. 状态更新未正确映射到组件的属性:确保在组件中正确地映射状态到属性。使用select操作符从状态中选择需要的数据,并将其映射到组件的属性中。
  4. 异步操作未正确处理错误:如果异步操作发生错误,可能会导致状态更新失败。确保在异步操作中正确处理错误,并在错误发生时更新状态以反映错误状态。

对于解决这个问题,可以尝试以下方法:

  1. 确保在异步操作完成后,通过dispatch一个action来更新状态。在reducer中捕获这个action,并更新状态以触发UI的更新。
  2. 在订阅状态的组件中,使用ChangeDetectorRef手动触发变化检测,以确保UI能够正确更新。
  3. 使用select操作符从状态中选择需要的数据,并将其映射到组件的属性中,以确保状态正确地映射到UI。
  4. 在异步操作中正确处理错误,并在错误发生时更新状态以反映错误状态。

对于更深入的了解和学习,可以参考以下资源:

  • Angular官方文档:https://angular.io/
  • ngRx官方文档:https://ngrx.io/
  • ngRx/store官方文档:https://ngrx.io/guide/store
  • ngRx/effects官方文档:https://ngrx.io/guide/effects
  • ngRx/entity官方文档:https://ngrx.io/guide/entity
  • ngRx/store示例代码:https://github.com/ngrx/platform/tree/master/projects/example-app
  • ngRx/effects示例代码:https://github.com/ngrx/platform/tree/master/projects/example-app
  • ngRx/entity示例代码:https://github.com/ngrx/platform/tree/master/projects/example-app

请注意,以上资源均为腾讯云相关产品和产品介绍链接地址,仅供参考。

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

相关·内容

Angular 接入 NGRX 状态管理

存储状态做出相应改变; Selector:用于获取存储状态切片纯函数; Effects:基于流实现副作用处理,以减少基于外部交互状态。...NGRX 状态管理包含了两条变更状态主线: 同步变更状态:用户 => Action => Reducer => Store(State); 异步变更状态:用户 => Action => Effects...; @ngrx/store-devtools:调试工具,需要配合github.com/reduxjs/red… 使用; @ngrx/schematics:提供使用 NGRX CLI 命令,需要与...,并使用 props 约束所接收参数类型; 增加用于删除用户DelUser,并使用emptyProps表示不传递任何参数(仅存储一位用户); 创建根据 Action 来更新状态 Reducer:...="content"> {{ user | async | json }} 接入副作用 通过接入副作用(effects)来完成异步获取网络数据更新状态。

14910

angular4实战(4)ngrx

同react-redux 相似,ngrx核心也是通过reducer获取储存在store值(状态),通过action来改变store中值(状态)。...比如{name:j_bleach}=>{name:bleach} 或者输入属性为一个数组时候[1,2,3]=>[1,2,3].push(4) 以上这两种方式都不会引发angular检查策略...而在本例,通过reducer返回是一个新值(一般是一个新对象),新值变化也会引起组件检查。.../angular/2016/02/22/angular-2-change-detection-explained.html#observables 不知道是否需要访问外国网站,再贴一篇sf上...在本例,如果把async这个过滤器取消的话,会造成一直loading,因为组件无法在监听到控制loading值改变,也就无法更新视图了。

1.1K30

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

显然,templateUrl并且styleUrls定义Angular应该哪里获取我们标记和CSS。...因此,“对结果评估不会导致任何语义上可观察到副作用或输出,例如可变对象突变或输出到I / O设备”......我们能做什么?答案在这个定义是正确Ngrx对救援副作用。...Ngrx效应 那么什么是副作用?它代码片段Actions或多或少地与我们缩减器相同,但它不是在我们状态改变某些内容,而是实际发送API请求,并根据结果派发新代码Actions。...我们还需要case cards.ADD:我们减速器删除分支。让我们尝试一下: ? 出于某种原因,我们在卡片添加操作获取重复数据。让我们试图找出原因。...你remove action现在可以用同样方法。当我们订阅获取数据时,您只需要实现该Remove效果。但我会把它留给你。 路由和模块 我们来谈谈我们应用程序组合。

42.4K10

Redux

另外,考虑异步场景: action数量 一个异步操作可能需要3个action(或者1个带有3种状态action),开始/成功/失败,对应UI状态为显示loading/隐藏loading并显示新数据.../隐藏loading并显示错误信息 更新view时机 异步操作结束后,dispatch action修改state,更新view 不用考虑多个异步操作时序问题,因为action历史记录来看,顺序是固定不变...,同步还是异步过程dispatch不重要 与同步场景没太大区别,只是action多一些,一些中间件(redux-thunk、redux-promise等等)只是让异步控制形式上更优雅,dispatch...密切相关,state是reducer计算结果,所以需要先规划整个应用state结构,有一些非常好用技巧: 把state分为数据状态和UI状态 UI状态可以维护在组件内部,也可以挂到状态树上,但都应该考虑区分数据状态和...UI方案使用,例如backbone、angular、React等等 react-redux用来处理new state -> view部分,也就是说,新state有了,怎样同步视图?

1.2K40

常见react面试题

store状态变更,都应该通过action触发,异步任务(通常都是业务或获取数据任务)也不例外,而为了不将业务或数据相关任务混入React组件,就需要使用其他框架配合管理异步任务流程,如redux-thunk...另外,浏览器爬虫不会等待我们数据完成之后再去抓取页面数据。服务端渲染返回给客户端是已经获取异步数据并执行JavaScript脚本最终HTML,网络爬中就可以抓取到完整页面的信息。...当然可以通过 setState 第二个参数 callback 拿到更新结果 setState 批量更新优化也是建立在异步(合成事件、钩子函数)之上,在原生事件和 setTimeout 不会批量更新...并且组件通过 subscribe store获取到 state 改变。...使用了 Redux,所有的组件都可以 store 获取到所需 state,他们也能从store 获取到 state 改变。这比组件之间互相传递数据清晰明朗多。

3K40

【React】归纳篇(十)组件间通信方式之Redux | UI组件AntDesign | Redux-react

react-router4 react-router概览 1、react一个插件库 2、专门用于实现一个SPA应用 3、基于react项目都会用到该库 SPA 1、点击页面链接不会刷新页面,本身也不会向服务器发送请求...(即:页面地址跳转都是在浏览器端实现不会去重新请求服务端获取 htmlhtml 只是在应用初始化时候加载一次。)...2、点击路由链接时,只会发生页面局部更新 3、数据通过ajax请求,在前端异步展示 4、整个应用只有一个完整页面,该页面由各种组件构成,页面的切换其实就是不同组件切换,你只需要在配置把不同路由路径和对应组件关联上即可...库,不是React插件库 它可以用在react,angular,vue等项目中,但基本与react配合使用 作用:集中式管理react应用多个组件共享状态。...Store : 核心,管理对象 内部维护: state、 reducer 核心方法: getState()获取状态;dispatch(action)分发事件,会触发Reducers调用;subscribe

21230

单向数据流-共享状态管理:fluxreduxvuex漫谈异步数据处理

redux Redux使用一个对象存储整个应用状态(global state),当global state发生变化时,状态树形结构最顶端往下传递。每一级都会去进行状态比较,从而达到更新。...redux与flux对比 Flux Store 是各自为战,每个 Store 只对对应 View 负责,每次更新都只通知对应View Redux 各子 Reducer 都是由根 Reducer...容器型组件一般通过connet函数生成,它订阅了全局状态变化,通过mapStateToProps函数,我们可以对全局状态进行过滤,而展示型组件不直接global state获取数据,其数据来源于父组件...:mutation handler必须是非异步方法 - 特性:支持带缓存getter,用于获取state经过某些计算后值 Vuex相对于Redux不同点有: 改进了ReduxAction和Reducer...这样看来我认为VUE是更推荐在使用了VUEX框架每个组件内部都使用store,而React-Redux则提供了自由选择性。

3.6K40

React总结概括

react功能其实很单一,主要负责渲染功能,现有的框架,比如angular是一个大而全框架,用了angular几乎就不需要用其他工具辅助配合,但是react不一样,他只负责ui渲染,想要做好一个项目...setState会自动调用render函数,触发视图重新渲染,如果仅仅只是state数据变化而没有调用setState,并不会触发更新。...Provider是一个组件,它接受store作为props,然后通过context往下传,这样react任何组件都可以通过contex获取store。...2、 react.js,redux,react-router 引入所需要对象和方法。...7、将Router放入最顶层组件Provider,引入store作为Provider属性。 8、调用render渲染Provider组件且放入页面的标签

1.1K20

Angular vs React 最全面深入对比

严格说来,Angular和React比较是不公平,因为Angular是一个功能丰富框架,而React是一个UI组件库,所以我们在接下来分析中会将一些经常和React在一起使用类库放在一起讨论...React决定使用一种类似XML语言在组件把标记和代码结合起来,直接在JavaScript代码编写HTML标记。...虽然Angular是第一个积极采用TypeScript主要框架,但它也可以与React一起使用。 RxJS RxJS是一个响应式编程库,可以灵活地处理异步操作和事件。...@ngrx/store @ngrx/store是由Redux启发Angular状态管理库,基于由pure reducer进行突变状态。...不像Redux那样将状态保存在一个不可变存储,它鼓励您仅存储最低限度必需状态,并从其中获取剩余数据。它提供了一组装饰器来定义可观察和观察者,并将反应逻辑引入到你状态管理代码

3.8K70

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

IceStore[3],淘系Ice团队出品状态管理库,我在日常业务中使用最多一个状态管理方案,亮点是基于Immer来实现数据不可变,整体使用方案类似Dva,state + reducer + effects...模板语法,在用Vue时候我没有感觉到模板语法有多好,可能是因为模板和逻辑写在一个文件里总觉得不纯粹。但在Angular模板被单独放一个html文件,组件用Class语法写,我就莫名觉得爽快。...NgRx[93],很好用Angular状态管理方案,写法和Redux非常像,也是action >>> reducer >>> state,所以几乎可以没有什么成本上手。...秉承了Angular思想,提供了一整套集成:和Angular Router集成:@ngrx/router-store;对于集合类型适配:@ngrx/entity;副作用管理:@ngrx/effects...BB%E5%9E%8B%E7%BC%96%E7%A8%8B.html [17] Taro: https://github.com/NervJS/taro [18] Rax: https://github.com

4.2K10

Redux设计模式

Redux是一种设计模式同时也是一种项目架构方案,他不依赖任何库或者任何框架,他不仅可以在React中使用甚至在Angular和Vue也可以使用。...使用Redux架构来说所有的组件基本不会互相通信了,数据放在一个叫做store数据仓库存储。 ?...会按照Action描述指令来更新数据state,当state更新好以后Store就会把数据推送给订阅了自己组件,组件会根据新数据重新渲染UI, 用户就能看到变化了。...简化后六层我们只保留ReducerStore,React组件,Actions这四个部分。为了更加清晰我们这里将ReducerStore移了出来,实际上他们是一体。...Reducer更新完成以后就会向Store输出一个新state,Store取到新state之后就会向订阅了自己React组件推送这个新数据。然后重新再次渲染UI

1.5K20

深入React

把函数式思想引入前端,通过PureComponent组合来实现UI 最大好处是让UI可预测,对同样f输入同样d一定能得到同样v 可以把各个f单独拎出来测试,组合起来肯定没有问题,理论上确定了组件质量是可靠...(根到叶子),不会逆流 props:管道 state:水源 单项数据流是由状态丢弃机制决定,具体表现为: 状态变化引发数据及UI变化都只会影响下方组件 渲染视图时向下流,表单交互能回来,引发另一次向下渲染...单向数据流是对渲染视图过程而言,子孙state如何改变都不会影响祖先,除非通知祖先更新其state state与props state是最小可变状态集,特点: 私有的。...虚拟DOM diff 几乎不收集 setState通知变化 React 依赖收集粒度来看: Vue通过getter动态收集依赖粒度最细,最精确 Ember和Angular都是通过静态模版解析来找出依赖...可以随便组合,不需要额外管理顺序 react-redux Redux与React没有任何关系,Redux作为状态管理层可以配合任何UI方案使用,例如backbone、angular、React等等 react-redux

1.2K50

一文梭穿Vuex、Flux、Redux、Redux-saga、Dva、MobX

Reducer 是一个纯函数,对于相同输入,永远都只会有相同输出,不会影响外部变量,也不会被外部变量影响,不得改写参数。...和 Flux 比较一下:Flux Store 是各自为战,每个 Store 只对对应 View 负责,每次更新都只通知对应View: Redux 各子 Reducer 都是由根 Reducer...在 Redux ,同步表现就是:Action 发出以后,Reducer 立即算出 State。那么异步表现就是:Action 发出以后,过一段时间再执行 Reducer。...saga 还能很方便并行执行异步任务,或者让两个异步任务竞争: // 并行执行,并等待所有的结果,类似 Promise.all 行为 const [users, repos] = yield [...异步数据获取相关业务逻辑放在了单独 saga.js ,不再是掺杂在 action.js 或 component.js

5.4K10

状态管理概念,都是纸老虎

Reducer 是一个纯函数,对于相同输入,永远都只会有相同输出,不会影响外部变量,也不会被外部变量影响,不得改写参数。...和 Flux 比较一下:Flux Store 是各自为战,每个 Store 只对对应 View 负责,每次更新都只通知对应View: ?...在 Redux ,同步表现就是:Action 发出以后,Reducer 立即算出 State。那么异步表现就是:Action 发出以后,过一段时间再执行 Reducer。...saga 还能很方便并行执行异步任务,或者让两个异步任务竞争: // 并行执行,并等待所有的结果,类似 Promise.all 行为 const [users, repos] = yield [...和 redux-thunk 等其他异步中间件对比来说,redux-saga 主要有下面几个特点:异步数据获取相关业务逻辑放在了单独 saga.js ,不再是掺杂在 action.js 或 component.js

5.2K20

深入Redux架构

用户使用方式复杂 不同身份用户有不同使用方式(比如普通用户和管理员) 多个用户之间可以协作 与服务器大量交互,或者使用了WebSocket View要从多个来源获取数据 简单说,如果你UI层非常简单...(1, { type: 'ADD', payload: 2 }); 上面代码reducer函数收到名为ADD Action 以后,就返回一个新 State,作为加法计算结果。...有的中间件有次序要求,使用前要查一下文档。比如,logger就一定要放在最后,否则输出结果会不正确。 异步操作基本思路 理解了中间件以后,就可以处理异步操作了。...它作用就是像它名字那样,建立一个(外部)state对象到(UI 组件)props对象映射关系。...connect方法可以省略mapStateToProps参数,那样的话,UI 组件就不会订阅Store,就是说 Store 更新不会引起 UI 组件更新

2.2K60

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

IceStore,淘系Ice团队出品状态管理库,我在日常业务中使用最多一个状态管理方案,亮点是基于Immer来实现数据不可变,整体使用方案类似Dva,state + reducer + effects...模板语法,在用Vue时候我没有感觉到模板语法有多好,可能是因为模板和逻辑写在一个文件里总觉得不纯粹。但在Angular模板被单独放一个html文件,组件用Class语法写,我就莫名觉得爽快。...NodeJS NestJS,一个大而全Node框架,就像NodeJS里Angular,实际上作者也是受到了Angular影响,很多装饰器都和Ng同名。...NgRx,很好用Angular状态管理方案,写法和Redux非常像,也是action >>> reducer >>> state,所以几乎可以没有什么成本上手。...秉承了Angular思想,提供了一整套集成:和Angular Router集成:@ngrx/router-store;对于集合类型适配:@ngrx/entity;副作用管理:@ngrx/effects

2.8K10

redux&react-redux

redux是什么 1、redux是一个专门用于做状态管理js库(不是react插件库)。 2、它可以用在react,angular,vue等项目中,但基本与react配合使用。...:传递action{type:’’,data:’’} getState:获取store值 api createStore :专门用于创建redux中最为核心store对象 applyMiddleware...containers 用来放置容器组件和UI组件(直接将UI组件和容器组件写入一个jsx文件即可) 概念 UI组件:不能使用任何reduxapi,只负责页面的呈现,交互等....容器组件:负责和redux通信,将结果交给UI组件 api Provider : 无需自己给容器组件传递store,给根组件包裹一个 即可 connect:生成一个容器组件,并暴露 //未简写 mapStateToProps...文件和action文件 3,reducers文件夹index文件引入心创建reducer文件 4,containers添加文件写入容器和UI组件(引入action文件暴露API) 5,最后就是

9110

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

在各大框架均可使用,当然各个框架也有自己再度封装状态管理库,如angularngrx,vuevuex,而本文主要介绍是reactreact-redux。 示例介绍 ?...关联rudex和页面组件-connect 之前主页面的代码可以看到,错误信息显示是由组件props传进来,而主页面是如何获取相关props呢,答案是通过一个connect函数。...mapStateToProps(state, ownProps) 第一个参数是获取redux仓库一个函数。...为了方便快速理解,我们可以简单粗暴认为他是jsgetter,settergetter,这是一个用来redux获取函数,这个函数返回值,可以在当前组件props拿到。...在mapStateToProps这个取值函数,取也就是相关reducer返回值。 触发相关action后主页控制台: ?

88430

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

一、基于 Redux 状态管理 2013年React发布至今已近6个年头,前端框架逐渐形成 React/Vue/Angular 三足鼎立之势。...庆幸是除了 React 社区,Vue 社区有类似的 Vuex,Angular 社区有 NgRx 也提供了几乎同样能力,甚至 NgRx 还可以无缝使用 redux-devtools 来调试状态变化。...reducer 和 view 不必一一对应,应用同时存在组件树和状态树,按照各自需要去组织,通过 connect 来绑定状态树一个或多个分支到组件树 通过构造一些预设数据类型来减少样板代码。...曾经 React 和 Angular 是两个很难调和框架,开发浪费了我们大量的人力。...如果你还没有使用,可以考虑切换,绝对能给项目带来很大提升。过去一年,我们部分使用 TS 变为全面切换到 TS,包括我们自己开发工具库等。

99010
领券