开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

没有redux devtools扩展，带有NgRx的Angular应用程序无法正常工作

在没有redux devtools扩展的情况下，带有NgRx的Angular应用程序仍然可以正常工作。NgRx是一个用于管理应用程序状态的库，它基于Redux模式。Redux devtools扩展是一个用于调试和监控Redux状态的工具，它提供了一些便利的功能，如时间旅行调试和状态快照。

虽然没有redux devtools扩展，但我们仍然可以通过其他方式来调试和监控NgRx状态。以下是一些替代方法：

使用@ngrx/store-devtools库：@ngrx/store-devtools是NgRx官方提供的一个库，它提供了类似于redux devtools扩展的功能。您可以在应用程序中集成该库，并使用它来调试和监控NgRx状态。
使用console.log()：您可以在应用程序中使用console.log()语句来输出NgRx状态的变化。通过在关键位置添加console.log()语句，您可以查看状态的变化并进行调试。
使用浏览器开发者工具：现代浏览器都提供了强大的开发者工具，您可以使用这些工具来监控应用程序的状态变化。例如，Chrome浏览器的开发者工具中的"Console"选项卡可以显示应用程序中的日志输出。

尽管没有redux devtools扩展，但NgRx仍然具有以下优势和应用场景：

优势：

单一数据源：NgRx使用单一的状态存储来管理应用程序的状态，使得状态的变化更加可控和可预测。
可预测性：通过使用纯函数来处理状态的变化，NgRx确保了状态变化的可预测性和可测试性。
可扩展性：NgRx提供了一些强大的工具和模式，使得应用程序的状态管理变得更加可扩展和可维护。

应用场景：

大型应用程序：NgRx适用于大型应用程序，特别是那些具有复杂的状态管理需求的应用程序。
需要共享状态的组件：如果应用程序中的多个组件需要共享同一份状态数据，NgRx可以提供一种可靠的方式来管理和同步这些状态数据。
异步数据流：NgRx提供了一些强大的工具和模式，使得处理异步数据流变得更加简单和可控。

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

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
腾讯云区块链（Blockchain）：https://cloud.tencent.com/product/baas
腾讯云音视频处理（VOD）：https://cloud.tencent.com/product/vod
腾讯云移动开发（Mobile）：https://cloud.tencent.com/product/mobile

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

有帮助

没帮助

相关·内容

angular4实战（4）ngrx

https://blog.csdn.net/j_bleach/article/details/78161765 ngrx ngrx是angular的状态管理库，与...react-redux相同，都是由redux的基础上延伸出来。...， ngrx/store-devtools 本次实例用的是ngrx 4.x版本，因为没有跟路由关联，也没有复杂的行为，只用到了ngrx/store。...同react-redux 相似，ngrx的核心也是通过reducer来获取储存在store中的值（状态），通过action来改变store的中值（状态）。...在本例中，如果把async这个过滤器取消的话，会造成一直loading，因为组件无法在监听到控制loading值的改变，也就无法更新视图了。

1.1K3 0

同样做前端，为何差距越来越大？

前端应用越来越复杂，技术框架不断变化，如何成为一位优秀的前端工程师，应对更大的挑战？今天，阿里前端技术专家会影结合实际工作经验，沉淀了五项重要方法，希望能对你的职业发展、团队协作有所启发。...一、基于 Redux 的状态管理从2013年React发布至今已近6个年头，前端框架逐渐形成 React/Vue/Angular 三足鼎立之势。...我们先后尝试过原生 Redux、分形 Fractal 的思路、自研类 Mobx 框架、Angular Service，最终认为 Redux 依旧是复杂应用数据流处理最佳选项之一。...庆幸的是除了 React 社区，Vue 社区有类似的 Vuex，Angular 社区有 NgRx 也提供了几乎同样的能力，甚至 NgRx 还可以无缝使用 redux-devtools 来调试状态变化。...未来如果你只提供一个代码库，那它的价值会非常局限。你可以参照上面的图表，开发相应的扩展来丰富生态。如果你是新手，推荐学习下编译原理和对应的扩展开发规范。

1.2K2 0

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

一、基于 Redux 的状态管理从2013年React发布至今已近6个年头，前端框架逐渐形成 React/Vue/Angular 三足鼎立之势。...我们先后尝试过原生 Redux、分形 Fractal 的思路、自研类 Mobx 框架、Angular Service，最终认为 Redux 依旧是复杂应用数据流处理最佳选项之一。...庆幸的是除了 React 社区，Vue 社区有类似的 Vuex，Angular 社区有 NgRx 也提供了几乎同样的能力，甚至 NgRx 还可以无缝使用 redux-devtools 来调试状态变化。...最终 TS 让代码更加健壮，尤其是对于大型项目，编译通过几乎就代表运行正常，也给重构增加了很多信心。...未来如果你只提供一个代码库，那它的价值会非常局限。你可以参照上面的图表，开发相应的扩展来丰富生态。如果你是新手，推荐学习下编译原理和对应的扩展开发规范。

1K1 0

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

它带有一个完整的重写，以及各种改进，包括优化构建和更快的编译时间。在这个Angular 5教程中，我们将从头开始构建一个笔记应用程序。如果您一直在等待学习Angular 5，本教程适合您。 ?...State是一个单一的，不可变的数据结构 - 至少Ngrx为我们实现它的方式。Ngrx是由Redux提供灵感的“RxJS支持Angular应用程序的状态管理库”。 Ngrx的灵感来自Redux。...“Redux是一种管理应用程序状态的模式。”...现在它正在工作。有点。请记住，我们正好将Firebase集成到我们的应用程序中。现在它由于高度可维护的Ngrx商店而丢失了。也就是说，它存储在任何地方。...[logger] : []; 在根级别上，我们目前没有任何状态，但我们仍然需要定义空状态，以便在延迟加载的过程中对其进行扩展。

42.6K1 0

8分钟为你详解React、Angular、Vue三大框架

钩子的规则也适用于它们。常用术语 React并没有试图提供一个完整的 "应用程序库"。它是专门为构建用户界面而设计的，因此并不包括许多一些开发者认为构建应用程序所需的工具。...Angular和AngularJS的区别 Angular没有 "Scope"或控制器的概念，相反，它使用组件的层次结构作为其主要的架构特征。...常用命令从终端上，全局安装Angular CLI： npm install -g @angular/cli 使用 ng new 命令创建一个新的 Angular CLI 工作区: ng new my-project-name...5、路由单页面应用程序（SPA）的一个传统缺点是无法分享到特定网页中的确切 "子 "页面的链接。...7、官方工具 Devtools - 用于调试Vue.js应用程序的浏览器devtools扩展。

22.1K2 0

Angular vs React 最全面深入对比

如今，Angular和React这两个JavaScript框架可谓红的发紫，同时针对这两个框架的选择变成了当下最容易被问及或者被架构设计者考虑的问题，本文或许无法告诉你哪个框架更优秀，但尽量从更多的角度去比较两者...主要的开发方（赞助方）可能会突然的放弃。如果你需要帮助，可能没有大型知识库或社区可用。...它的灵感来自Flux，但是有一些简化。Redux的关键思想在于，应用程序的整个状态由单个对象表示，该对象由名为reducers的函数进行突变。Reducers本身是纯功能，与组件分开实现。...@ngrx/store @ngrx/store是由Redux启发的Angular的状态管理库，基于由pure reducer进行突变的状态。...如果没有，会给你充分的时间重新选择。

3.8K7 0

【译】我是如何学习任意前端框架的

现在，所有框架都提供API来管理你的状态（例如Angular有一个Service，React现在有Context API）以及当你的数据规模变大之后，你可以考虑使用像redux这样的库。...，因此在这一节中尝试添加或构建另一个带有登陆/注册页面的应用程序。...你将学到：路由守卫：某些页面只允许通过身份验证的用户（访问）如何发送并保存JWT(JSON Web令牌)以发出需要经过身份验证的用户请求 3.CRUD App 增删查改的应用程序是本节中最受欢迎的前端应用程序...尝试为后端框架添加auth功能 4.聊天应用在前面的章节中，对后端的所有请求都是单向的，你在管理应用程序状态时没有问题。...你将学到：学习如何使用管理状态解决方案，如redux for react, ngrx for angular 2+ 或 vuex for vuejs以及如何将其与客户端应用程序集成使你的应用更灵活

3.6K1 0

2024十大JavaScript库

Redux Redux 提供了一个可预测的状态容器，可确保应用程序行为一致，使其更容易测试和调试。 Redux 应用程序还可以在客户端、服务器和原生环境中运行，确保令人印象深刻的可扩展性。...Redux 的严格结构——带有操作、还原器和单一真实来源（存储）——增强了可维护性和可扩展性。它非常适合需要一致行为并需要处理异步数据获取和副作用的应用程序。...诸如 Redux Thunk 和 Redux Saga 之类的中间件扩展了 Redux 的功能，允许复杂的 state 管理解决方案。...与开发工具集成：与 Redux DevTools 等工具无缝协作，以增强调试和状态检查。 3....Angular CLI：提供用于构建脚手架、构建和维护应用程序的强大命令行工具，提高开发人员的工作效率。

1141 0

前端框架选择指南：React vs Vue vs Angular

生态系统：极为丰富，有大量的第三方库和工具。性能：使用虚拟DOM，优化性能。模板语法：使用JSX，更接近JavaScript语法。状态管理：常见的解决方案如Redux、MobX。...模板语法：自己的模板系统，支持双向数据绑定。状态管理：提供NgRx等库进行状态管理。适合：大型企业级项目，需要严格结构和规范的团队。...扩展性和可维护性React: 组件化设计，易于拆分和复用，但需要良好的架构设计。Vue: 也强调组件化，但更注重开箱即用的完整解决方案，易于维护。...如果需要一个完整的解决方案，包括路由、状态管理和服务，Angular可能更合适。总结选择React、Vue还是Angular没有绝对的“最好”，每个框架都有其独特的优点和适用场景。...React适合需要高度定制和灵活性的项目，Vue适合快速开发和维护，Angular则适合大型、结构严谨的企业级应用。在做出决定时，务必考虑项目的需求、团队的技术背景、长期维护和扩展性等因素。

1540 0

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

Ionic[20]，出现比较早的一个跨端方案，最开始只支持Angular，现在还支持了React和Vue，暂时没有使用过。目前的了解是性能与Vue支持上存在一些问题（所以Angular YES）。...而且actions市场有各种大神们已经写好的action让你可以快速搭建一个严谨的工作流。...NgRx[93]，很好用的Angular的状态管理方案，写法和Redux非常像，也是action >>> reducer >>> state，所以几乎可以没有什么成本的上手。...秉承了Angular的思想，提供了一整套的集成：和Angular Router的集成：@ngrx/router-store；对于集合类型的适配：@ngrx/entity；副作用管理：@ngrx/effects...但还是推荐了解一下，毕竟我个人是喜欢这种稳定性保障的工作的，并且看着一个个测试用例通过也很有成就感。

4.2K1 0

回望过去，展望未来- 2024 React 生态一览表

Redux Toolkit Redux Toolkit[5] 是建立在 Redux 之上的全面状态管理库，Redux 是 React 应用程序中的状态管理库。...当然，还有recoil/jotai等,这里可以参考之前的React-全局状态管理的群魔乱舞在上面的内容中，我们没有涉及Redux，其实我刚开始接触的就是Redux，但是在后面的使用中，慢慢的发现它的「...前端测试通常包括「单元测试」、「集成测试」和「端到端测试」等多个层次，以确保整个应用在不同层面上的功能和性能都能够正常工作。...开发工具开发工具对于调试和改进 Web 应用程序的开发工作流程至关重要。...Redux DevTools[33] 是另一个 Chrome 扩展，可增强我们的 Redux 开发工作流程。它提供了对 Redux 存储的洞察，允许我们检查操作和状态更改，回溯和重放操作等。

6961 0

2018 前端趋势：更一致，更简单

当这些功能对于任何应用程序都是必备的时候，Angular 的闪光之处在于其集成的工具。...在完成了几个大型定义开发的 React / Redux / Webpack 项目后，所有的事情都基本为你准备好了，“马上开始工作”（just work）是一种极具吸引力的前景。...通过近来发布的版本，可以有趣的看到 Angular 在新的一年中竟会更加受到欢迎。尽管还很难说有多少，但是当你看到 NPM 的下载量的时候，Angular 并没有看起来增长的那么多。...无需考虑框架，它适用于任何应用程序，也有插件可以从 Redux、Vuex和@ngrx/tore 上记录额外的上下文。...除了记录 Redux 动作和状态之外，LogRocket 还会记录控制台日志、JavaScript 错误、堆栈信息、带有头+主体的网络请求/响应、浏览器元数据和自定义日志。

1.4K2 0

Angular v18 现已推出！

这与使用 zone.js 的应用程序类似，几乎没有区别。借助 zone.js，Angular 会在应用程序状态可能发生变化的任何时间运行更改检测。...不幸的是，async/await 是zone.js无法修补的 API 之一，因此我们需要通过 Angular CLI 将其降级为 promises。...DevTools 以可视化 Angular 的补水过程。...社区亮点随着 Angular 的创新，我们也看到了社区中的大量进步！ngrx、ngxs 和 rxAngular 等流行的状态管理库已经在采用 Angular 信号，并在组件中实现细粒度的反应性。...在将 Angular 发展为带有 Signals 的真正响应式框架并引入高级混合渲染功能的同时，我们始终忠于我们的使命，使开发人员能够自信地交付 Web 应用程序。

2351 0

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

Ionic，出现比较早的一个跨端方案，最开始只支持Angular，现在还支持了React和Vue，暂时没有使用过。目前的了解是性能与Vue支持上存在一些问题（所以Angular YES）。...而且actions市场有各种大神们已经写好的action让你可以快速搭建一个严谨的工作流。...Redux-Observable， Redux的RxJS中间件。 Reactive.How，生动的展示RxJS Observable在操作符管道中的流动，入门期间使用有奇效。...NgRx，很好用的Angular的状态管理方案，写法和Redux非常像，也是action >>> reducer >>> state，所以几乎可以没有什么成本的上手。...秉承了Angular的思想，提供了一整套的集成：和Angular Router的集成：@ngrx/router-store；对于集合类型的适配：@ngrx/entity；副作用管理：@ngrx/effects

2.9K1 0

「首席架构师推荐」React生态系统大集合

优化性能介绍React Profiler 优化React：虚拟DOM解释 React中优化主要性能问题的权威指南 Twitter Lite和高性能Retive渐进式Web应用程序使用React DevTools...应用程序样板 react-devtools - 检查Chrome和Firefox开发人员工具中的React组件层次结构 react-hot-loader - 实时调整React组件 react-loadable...简单，可扩展的状态管理 Qaf - 作为商店的组件。...Redux GitHub Redux官方网站很棒的Redux列表 Redux工具 react-redux - Redux的官方React绑定 redux-devtools - Redux的DevTools...实用的Redux 初学者的完整React Redux教程 MobX JavaScript应用程序的简单，可扩展状态管理 MobX通用资源 MobX GitHub MobX官方网站 MobX工具 mobx-react

12.4K3 0

Angular、React、Vue.js 等 6 大主流 Web 框架都有什么优缺点？

就像本系列中所有的内容一样，我们的回答也大都是依据这些内容。虽然无框架也能正常工作，但是，这也是有代价的。...没有其他库和模式的广泛约定和标准化，标准化 React + Redux 比较于我们正在采用的 JavaScript 来编写我们的应用程序效率要高。未来将何去何从？...它也表现出了一定程度的语言适应能力，并且随着某些模式的落伍和失宠而继续保持自身语言的现代化和时代性，目前没有迹象表明 vue.js 架构将来无法适应进一步发展。何时选择 Vue.js？...Dojo2 将是未来优秀 web 框架之一，它将继续努力为构建可扩展性的 web 应用程序提供清晰的模式和指导。...由于 Ember.js 没有扩展，所以对如何交互和管理 DOM，你会发现你有不一致的部件，而且也没有提供一个易于管理的界面。未来该何去何从？

2.3K5 0

Angular、React、Vue.js等6 大主流 Web 框架都有什么优缺点？

就像本系列中所有的内容一样，我们的回答也大都是依据这些内容。虽然无框架也能正常工作，但是，这也是有代价的。...没有其他库和模式的广泛约定和标准化，标准化 React + Redux 比较于我们正在采用的 JavaScript 来编写我们的应用程序效率要高。未来将何去何从？...它也表现出了一定程度的语言适应能力，并且随着某些模式的落伍和失宠而继续保持自身语言的现代化和时代性，目前没有迹象表明 vue.js 架构将来无法适应进一步发展。何时选择 Vue.js？...Dojo2 将是未来优秀 web 框架之一，它将继续努力为构建可扩展性的 web 应用程序提供清晰的模式和指导。...由于 Ember.js 没有扩展，所以对如何交互和管理 DOM，你会发现你有不一致的部件，而且也没有提供一个易于管理的界面。未来该何去何从？

2.9K0 0

应用connected-react-router和redux-thunk打通react路由孤立

在下面的场景中，引入 Redux 是比较明智的：你有着相当大量的、随时间变化的数据你的 state 需要有一个单一可靠数据来源你觉得把所有 state 放在最顶层组件中已经无法满足需要了的确，这些场景很主观笼统...redux与react-router React Router 与 Redux 一起使用时大部分情况下都是正常的，但是偶尔会出现路由更新但是子路由或活动导航链接没有更新。...在使用一些 redux 的connect()或者 mobx的inject()的组件中，如果依赖于路由的更新要重新渲染，会出现路由更新了但是组件没有重新渲染的情况。.../logOnly 如果不想在生产环境使用扩展，那就只开启redux-devtools-extension/developmentOnly就好点击文章查看更多细节 import thunk from "redux-thunk...，请参考以下集合链接和博客文章结尾 Store 跟 Router 必須使用同一个 history 物件，否則会有其中一方不能正常工作，如果以后有遇到必須要先检查一次才行，记录一下。

2.4K0 0

6 大主流 Web 框架优缺点对比

就像本系列中所有的内容一样，我们的回答也大都是依据这些内容。虽然无框架也能正常工作，但是，这也是有代价的。...没有其他库和模式的广泛约定和标准化，标准化 React + Redux 比较于我们正在采用的 JavaScript 来编写我们的应用程序效率要高。未来将何去何从？...它也表现出了一定程度的语言适应能力，并且随着某些模式的落伍和失宠而继续保持自身语言的现代化和时代性，目前没有迹象表明 vue.js 架构将来无法适应进一步发展。...Dojo2 将是未来优秀 web 框架之一，它将继续努力为构建可扩展性的 web 应用程序提供清晰的模式和指导。...由于Ember.js没有扩展，所以对如何交互和管理DOM，你会发现你有不一致的部件，而且也没有提供一个易于管理的界面。未来该何去何从？

2.1K2 0

基础| 六大主流框架怎么选？这里告诉你！

就像本系列中所有的内容一样，我们的回答也大都是依据这些内容。虽然无框架也能正常工作，但是，这也是有代价的。...没有其他库和模式的广泛约定和标准化，标准化 React + Redux 比较于我们正在采用的 JavaScript 来编写我们的应用程序效率要高。...它也表现出了一定程度的语言适应能力，并且随着某些模式的落伍和失宠而继续保持自身语言的现代化和时代性，目前没有迹象表明 vue.js 架构将来无法适应进一步发展。...Dojo2 将是未来优秀 web 框架之一，它将继续努力为构建可扩展性的 web 应用程序提供清晰的模式和指导。...由于Ember.js没有扩展，所以对如何交互和管理DOM，你会发现你有不一致的部件，而且也没有提供一个易于管理的界面。

1.1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭