开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在订阅store.dispatch时重新加载页面之前，Ngrx会导致挂起问题

在订阅store.dispatch时重新加载页面之前，Ngrx可能会导致挂起问题。Ngrx是一个用于管理状态的Angular库，它基于Redux架构模式。当我们在应用中使用Ngrx时，可能会遇到一些挂起问题，特别是在重新加载页面时。

挂起问题是指在重新加载页面时，由于异步操作的未完成或状态的丢失，导致应用出现不一致或错误的情况。这可能会导致用户体验下降，甚至影响应用的功能。

为了解决这个问题，我们可以采取以下措施：

使用持久化存储：将应用的状态持久化到本地存储中，例如使用localStorage或IndexedDB。这样，在重新加载页面后，我们可以从本地存储中恢复应用的状态，避免状态丢失。
使用路由导航守卫：在Angular中，我们可以使用路由导航守卫来控制页面的加载和导航。通过在导航之前检查异步操作的状态，我们可以阻止页面的加载，直到异步操作完成。这样可以避免挂起问题。
使用缓存策略：在重新加载页面之前，我们可以使用缓存策略来缓存应用的状态或数据。这样，在重新加载页面后，我们可以从缓存中获取状态或数据，而不需要重新发起异步请求。
合理设计应用架构：在使用Ngrx时，我们需要合理设计应用的架构，包括拆分状态、定义合适的Action和Reducer等。通过合理的架构设计，可以降低挂起问题的发生概率，并提高应用的可维护性和可扩展性。

总结起来，为了避免在订阅store.dispatch时重新加载页面之前出现挂起问题，我们可以采取持久化存储、路由导航守卫、缓存策略和合理设计应用架构等措施。这些措施可以帮助我们解决挂起问题，提高应用的稳定性和用户体验。

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

腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
腾讯云安全产品：https://cloud.tencent.com/solution/security

相关搜索:在执行POST函数之前导致页面重新加载的单击事件 Jquery在悬停时加载MVC视图会导致闪烁问题为什么在Django中重新加载页面时图片会消失？如何调试包装类导致this.Close()在加载表单时挂起的问题？Angular DataTable在页面访问时不显示数据，但在我重新加载页面之前在route.queryParamMap和route.paramMap上订阅会导致两次页面加载在"react- pdf“中加载所有pdf页面时重新渲染问题在LazyVStack中使用带有AsyncImage的VStack会导致图像在滚动时重新加载在Angular 8中使用window.history.state导致页面重新加载时出错在更改页面时在Reactjs中重新加载应用程序会移除所有保存的状态吗按浏览器后退按钮时丢失的$_SESSION值，在重新加载页面时完全没有问题在django中创建自定义404页面会导致加载javascript文件时出现问题在不重新加载整个页面的情况下使用enter键提交数字时遇到问题 Aurelia路由-在使用Webpack Dev Server时，使用F5重新加载网站会导致错误的捆绑包URL 如何防止“后退”和“前进”浏览器按钮在取消导航时导致页面重新加载和放弃状态。React-路由器v4.3 在document_end上填写表单时，我的脚本单击一个按钮，该按钮会重新加载页面，以便再次运行。如何停止它的运行？

相关搜索:

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

有帮助

没帮助

相关·内容

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

它还监视项目源中的每个更改并重新编译所有更改，之后它会要求浏览器重新加载打开的页面。因此，通过使用Angular CLI，我们已经在开发环境中工作，无需编写配置或实际执行任何操作。...每次我们改变我们的代码时，Angular CLI都会重新编译，如果需要的话重新注入，并要求我们的浏览器在页面打开时重新加载页面。...Angular做得非常快，所以在大多数情况下，当你将你的窗口从IDE切换到浏览器时，它已经为你重新加载了。...想想像这样：我们刚刚实现了在我们的表单发生变化时调用的代码。如果我们用承诺处理用户更改，则只有第一个用户更改会在我们需要重新订阅之前处理。...它们被用在我们应用程序的不同部分，所以它们可能会一路销毁 - 例如，当我们在路由中使用组件作为页面时（我们将在本指南后面讨论路由）。

42.6K1 0

angular4实战（4）ngrx

详情参考我之前的文章：http://blog.csdn.net/j_bleach/article/details/78070539。ngrx和react-redux本质没什么区别。...定义loading的action和reducer 在项目中创建ngrx文件夹，并在之下创建action和reducer文件。...关联store ngrx的关联通过在app.module.ts将StoreModule注入reducer。...高中英语水平翻译一下：async这个管道，会返回订阅的Observe ,promise对象的最新的值，当观察者发现值有改变时，就会触发组件的检查策略，并且在组件销毁时也会自动的去取消订阅避免内存泄漏。...在本例中，如果把async这个过滤器取消的话，会造成一直loading，因为组件无法在监听到控制loading值的改变，也就无法更新视图了。

1.1K3 0

解决Android开发中的痛点问题用Kotlin Flow

，会导致在当前页面每次屏幕旋转都会重新执行observe，也就导致了每次旋转后都会弹一遍Toast。...在使用MVVM架构时，数据变化驱动UI更新。对于UI来说只需关心最终状态，但对于一些事件，并不全是希望按照LiveData的合并策略将最新一条之前的事件全部丢弃。...也可以使用repeatOnLifecycle(State) 来在UI层收集，当生命周期 < State时，会取消协程，恢复时再重新启动协程。...根据之前分析的诉求，空档期的事件不能丢弃，而应该在Activity回到活跃状态时依次消费。所以考虑当缓冲区溢出时策略为挂起，容量默认0即可，即默认构造方法即符合我们的需求。...只有当至少有一个订阅者时，onBufferOverflow才会生效。当无订阅者时，只有最近replay数目的值会保存，并且onBufferOverflow无效。

3.2K2 0

【微信小程序】---- redux 在原生微信小程序的使用实例

动态更新进行页面 Page 和组件 Component 的拦截；在页面和组件加载时，对当前页面进行订阅 subscribe；注意页面和组件卸载时，需要取消订阅；不是所有的页面和组件都需要订阅，...；在订阅方法中获取当前页面需要订阅的全局状态，收集；由于微信小程序的逻辑层和视图层通信需要使用 setData 函数，但是调用太频繁，消耗性能，因此收集需要订阅的全局状态，统一将数据通知视图层。...，是判断页面是否订阅全局状态的依据，减少订阅的次数，因为每次订阅 listeners，都会收集，执行依次派发， listeners 中的订阅都会执行一次，全部页面和组件都订阅，会消耗性能过大，仅在需要的页面订阅...订阅生成，但是如果不取消，就会一直存在，在修改全局状态时，会执行 listeners 中所有的订阅。但是页面卸载后下次进入就会生成新的 id，新的页面，所以需要重新订阅。...总结由于性能的原因，能够不使用，就尽量不使用；除非多页面多组件同时使用了该全局状态，同时业务逻辑比较复杂，容易混淆，使用全局状态方便管理，否则不要设置为全局状态；在订阅优化尽量只执行更新的订阅；

5.7K1 0

【Vuejs】778- 超全 Vuejs 知识点（基础到进阶）

store.dispatch 在不同模块中可以触发多个 action 函数。...说一下虚拟Dom以及key属性的作用由于在浏览器中操作DOM是很昂贵的。频繁的操作DOM，会产生一定的性能问题。这就是虚拟Dom的产生原因。...这样就可以监听 url 变化来实现更新页面部分内容的操作区别 url 展示上，hash 模式有“#”，history 模式没有刷新页面时，hash 模式可以正常加载到 hash 值对应的页面，而 history...一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。...模板模板方面没有大的变更，只改了作用域插槽，2.x 的机制导致作用域插槽变了，父组件会重新渲染，而 3.0 把作用域插槽改成了函数的方式，这样只会影响子组件的重新渲染，提升了渲染的性能。

3.3K5 1

Vue踩坑记 — beforeEach 中 next 方法

守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。...refresh值为true，则重新添加路由 store.dispatch('setNoRefresh'); //重新刷新设置为false DynamicAddRouter...") // 如果用户登录了，页面refresh值为true，则重新添加路由 store.dispatch('setNoRefresh'); //重新刷新设置为false...refresh值为true，则重新添加路由 store.dispatch('setNoRefresh'); //重新刷新设置为false DynamicAddRouter...") // 如果用户登录了，页面refresh值为true，则重新添加路由 store.dispatch('setNoRefresh'); //重新刷新设置为false

2.8K1 0

vue后台管理之动态加载路由

三、防坑 1、关于加载菜单信息的时机在此之前我将第二步获取菜单信息放在我的SideBar组件的create函数中，当时我发现也没有什么问题。...登录跳转到home界面左侧菜单也成功渲染，点击菜单进入我们动态加载的路由界面，也没问题。但是当我点击刷新的时候问题来。页面空白控制台也不报错。当时我就蒙蔽了，什么情况，不是好好的嘛？...原因：第五步中我们我们浏览器刷新，在spa应用整个vue实例会重新加载，也是说我的vue-router会重新初始化，那么我们之前的动态addRoute就不存在了，但是我们此时访问一个不存在的页面，所以我们的...sidebar组件也就不会被访问，那么也无法获取菜单信息，就导致页面空白。...，会跳转到404页面的。

4.8K2 0

React进阶(4)-拆分Redux-将store,Reducer,action,actionTypes独立管理

改变store的数据唯一办法就是派发action,调用store.dispatch方法,也知道通过getState方法获取store中的所有状态数据,而实现组件页面的更新与store保持同步,必须得触发注册...subscribe方法,通时还得监听一个事件处理函数用于重新在一次获取store的数据使页面同步更新在上几次编写Redux的代码中,创建store,reducer,acton,以及actionTypes...来 · 啦 · ♚ 完整的TodoList代码这是上一节完整的一todolist的代码,创建store,reducer,以及action,UI组件等都是混写在一个文件当中的,这样虽然没有什么问题...,但是维护起来,非常痛苦如果一个文件里代码行数超过了130行,就应该考虑拆分代码了的,当然这并不是硬性的规定,适当的拆分有利于代码的维护,但是过度的拆分,也会增加项目的复杂程度实际效果如下所示: ?...action单独封装成一个函数放在一个单独的文件中进行管理的,它返回对应的类型和必要的参数的拆分的目的主要是提高代码的可维护性 (解释下单页面应用,一个页面,主要体现在入口上) 创建store单独管理

1.7K1 0

深入Redux架构

关于redux 之前写了一篇通过一个demo了解Redux，但对于redux的核心方法没有进行深入剖析，在此重新总结学习，完整的代码看这里。...Action State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。...操作开始时，送出一个 Action，触发 State 更新为"正在操作"状态，View 重新渲染操作结束后，再送出一个 Action，触发 State 更新为"操作结束"状态，View 再一次重新渲染...这样的处理，就解决了自动发送第二个 Action 的问题。但是，又带来了一个新的问题，Action 是由store.dispatch方法发送的。...t.completed) default: throw new Error('Unknown filter: ' + filter) } } mapStateToProps会订阅

2.2K6 0

【React】360- 完全理解 redux（从零实现一个 redux）

当然上面的有一个很明显的问题：修改 count 之后，使用 count 的地方不能收到通知。我们可以使用发布-订阅模式来解决这个问题。...所有的计划写在一个 reducer 函数里面，会导致 reducer 函数及其庞大复杂。按经验来说，我们肯定会按组件维度来拆分出很多个 reducer 函数，然后通过一个函数来把他们合并起来。...但是还有个问题， state 我们还是写在一起的，这样会造成 state 树很庞大，不直观，很难维护。我们需要拆分，一个 state，一个 reducer 写一块。...会碰到什么问题吗？ loggerMiddleware 中包含了外部变量 store，导致我们无法把中间件独立出去。...我们就希望在做按需加载的时候，reducer也可以跟着组件在必要的时候再加载，然后用新的 reducer 替换老的 reducer。

7612 0

完全理解 redux（从零实现一个 redux）

当然上面的有一个很明显的问题：修改 count 之后，使用 count 的地方不能收到通知。我们可以使用发布-订阅模式来解决这个问题。...所有的计划写在一个 reducer 函数里面，会导致 reducer 函数及其庞大复杂。按经验来说，我们肯定会按组件维度来拆分出很多个 reducer 函数，然后通过一个函数来把他们合并起来。...但是还有个问题， state 我们还是写在一起的，这样会造成 state 树很庞大，不直观，很难维护。我们需要拆分，一个 state，一个 reducer 写一块。...会碰到什么问题吗？ loggerMiddleware 中包含了外部变量 store，导致我们无法把中间件独立出去。...我们就希望在做按需加载的时候，reducer也可以跟着组件在必要的时候再加载，然后用新的 reducer 替换老的 reducer。

6362 0

完全理解 redux（从零实现一个 redux）

当然上面的有一个很明显的问题：修改 count 之后，使用 count 的地方不能收到通知。我们可以使用发布-订阅模式来解决这个问题。...所有的计划写在一个 reducer 函数里面，会导致 reducer 函数及其庞大复杂。按经验来说，我们肯定会按组件维度来拆分出很多个 reducer 函数，然后通过一个函数来把他们合并起来。...但是还有个问题， state 我们还是写在一起的，这样会造成 state 树很庞大，不直观，很难维护。我们需要拆分，一个 state，一个 reducer 写一块。...会碰到什么问题吗？ loggerMiddleware 中包含了外部变量 store，导致我们无法把中间件独立出去。...我们就希望在做按需加载的时候，reducer也可以跟着组件在必要的时候再加载，然后用新的 reducer 替换老的 reducer。

8301 0

完全理解 redux

当然上面的有一个很明显的问题：修改 count 之后，使用 count 的地方不能收到通知。我们可以使用发布-订阅模式来解决这个问题。...所有的计划写在一个 reducer 函数里面，会导致 reducer 函数及其庞大复杂。按经验来说，我们肯定会按组件维度来拆分出很多个 reducer 函数，然后通过一个函数来把他们合并起来。...但是还有个问题， state 我们还是写在一起的，这样会造成 state 树很庞大，不直观，很难维护。我们需要拆分，一个 state，一个 reducer 写一块。...会碰到什么问题吗？ loggerMiddleware 中包含了外部变量 store，导致我们无法把中间件独立出去。...我们就希望在做按需加载的时候，reducer也可以跟着组件在必要的时候再加载，然后用新的 reducer 替换老的 reducer。

8942 0

前端高频react面试题

这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。...中页面重新加载时怎样保留数据？...这个问题就设计到了数据持久化，主要的实现方式有以下几种：Redux：将页面的数据存储在redux中，在重新加载页面时，获取Redux中的数据；data.js：使用webpack构建的项目，可以建一个文件...，data.js，将数据保存data.js中，跳转页面后获取；sessionStorge：在进入选择地址页面之前，componentWillUnMount的时候，将数据存储到sessionStorage...在使用 React Router时，如何获取当前页面的路由或浏览器中地址栏中的地址？

3.4K2 0

完全理解 redux（从零实现一个 redux）

当然上面的有一个很明显的问题：修改 count 之后，使用 count 的地方不能收到通知。我们可以使用发布-订阅模式来解决这个问题。...所有的计划写在一个 reducer 函数里面，会导致 reducer 函数及其庞大复杂。按经验来说，我们肯定会按组件维度来拆分出很多个 reducer 函数，然后通过一个函数来把他们合并起来。...但是还有个问题， state 我们还是写在一起的，这样会造成 state 树很庞大，不直观，很难维护。我们需要拆分，一个 state，一个 reducer 写一块。...会碰到什么问题吗？ loggerMiddleware 中包含了外部变量 store，导致我们无法把中间件独立出去。...我们就希望在做按需加载的时候，reducer也可以跟着组件在必要的时候再加载，然后用新的 reducer 替换老的 reducer。

7642 0

React进阶(3)-上手实践Redux-如何改变store中的数据

前言在前面的一文React进阶(2)-上手实践Redux-如何获取store的数据当中,已经知道组件怎么获取store的数据,并渲染到页面上,那么在该节当中揭示怎么更改store的数据,实现页面的更新... 触发store,注册订阅subscribe函数,监听store数据的变化,保持页面的状态与store的同步重新获取store的数据,最终实现页面数据状态的更新下面就一起来编写todolist的添加...里面必须接收一个函数,会自动的调用this.handleStoreChange这个方法,保持store上的状态和this.state的同步,否则是会报错的,这个订阅函数放在componentWillMount...最后在组件移除时,销毁时,在componentWillUnmount中取消store的订阅事件 // 组件卸载,移除时调用该函数,一般取消,清理已注册的订阅,定时器的清理,取消网络请求,在这里面操作 ...store的数据,是通过getState方法进行获取store中的所有状态如何保持页面的组件与store数据同步更新,需要注册订阅subscribe方法,该方法接收一个函数,在该接收的函数内触发重新获取

2.6K3 0

React进阶(4)-拆分Redux-将store,Reducer,action,actionTypes独立管理

改变store的数据唯一办法就是派发action,调用store.dispatch方法,也知道通过getState方法获取store中的所有状态数据,而实现组件页面的更新与store保持同步,必须得触发注册...subscribe方法,通时还得监听一个事件处理函数用于重新在一次获取store的数据使页面同步更新在上几次编写Redux的代码中,创建store,reducer,acton,以及actionTypes...store 抽离容器组件完整的TodoList代码这是上一节完整的一todolist的代码,创建store,reducer,以及action,UI组件等都是混写在一个文件当中的,这样虽然没有什么问题...,但是维护起来,非常痛苦如果一个文件里代码行数超过了130行,就应该考虑拆分代码了的,当然这并不是硬性的规定,适当的拆分有利于代码的维护,但是过度的拆分,也会增加项目的复杂程度实际效果如下所示:... }); } 经过上面的action的拆分,现在看来我们的代码清晰多了,通过actionCreators来创建action,这是一个非常好的编程习惯,当然如果过度的拆分,就难免会让人觉得项目复杂

1.9K1 1

深入理解redux

降低组件的可复用性：因为 context 会导致组件和数据耦合度较高，如果一个组件依赖了 context，那它的复用性就异常困难性能问题：如果 context 中的数据频繁变化，就会导致你的页面从头到底频繁刷新...一般 context 的应用场景是在主题颜色、当前登陆账户信息、路由等既然 context 存在这样那样的问题，那有没有好一点的方式呢？...举个例子，如果你在每次 dispatch 相关内容的时候需要打一个日志，如果没有中间件你会这样做，借用官网的例子 console.log('dispatching', action) store.dispatch...，但是 react-redux 在内部实现了许多性能优化，以便你编写的组件仅在实际需要时重新渲染，并且使用一些 hook 的形式极大简化了我们的代码和逻辑，如果你要在 react 项目中使用 redux...，那就 @reduxjs/toolkit react-redux 之前我们没说到 redux toolkit，redux 我们也看到了，在实际业务中编写 reducer 又臭又长，而 toolkit 就是在

7035 0

Reduxreact-reduxredux中间件设计实现剖析

redux的设计思路及实现原理 react-redux的设计思路及实现原理 redux中间件的设计思路及实现原理一. redux的实现在一切开始之前，我们首先要回答一个问题...只有回答了这个问题，我们才能把握redux的设计思路。...会修改对应的state。...，但我个人认为这里称为观察者模式更准确，有关观察者和发布订阅的区别，讨论有很多，读者可以搜一下）所谓观察者模式，概念很简单：观察者订阅被观察者的变化，被观察者发生改变时，通知所有的观察者；也就是监听了被观察者的变化...// 我们之前的做法(在方法内直接替换dispatch): // store.dispatch = function dispatchAndLog(action)

2.2K2 0

Redux从设计到源码

比如，当前页面分三种状态：loading（加载中）、success（加载成功）或者error（加载失败），那么这三个就分别唯一对应着一种视图。...Action：State的变化，会导致View的变化。但是，用户接触不到State，只能接触到View。所以，State的变化必须是View导致的。...CQRS与Flux 相同：当数据在write side发生更改时，一个更新事件会被推送到read side，通过绑定事件的回调，read side得知数据已更新，可以选择是否重新读取数据。...store.subscribe()方法总结：入参函数放入监听队列返回取消订阅函数再来看下store.dispatch()-->分发action，修改State的唯一方式。 ?...Reducer里return state的时候，不要改动之前State，请返回新的。 immutable.js配合效果很好（但同时也会带来强侵入性，可以结合实际项目考虑）。

1.4K6 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭