- 综合排序
- 最热优先
- 最新优先
- 来自专栏小鑫同学编程历险记
Angular 接入 NGRX 状态管理
注：图片来自ngrx.io/guide/store NGRX 是 Angular 实现响应式状态管理的应用框架。 --standalone=false 安装 NGRX 核心模块： @ngrx/store：状态管理核心模块，包含了状态存储、Actions、Reducers、Selectors； @ngrx/store-devtools ：调试的工具，需要配合github.com/reduxjs/red… 使用； @ngrx/schematics：提供使用 NGRX 的 CLI 命令，需要与 Angular 进行整合使用； 安装命令： npm install @ngrx/store --save npm install @ngrx/store-devtools --save npm install @ngrx/schematics 初始化项目： 创建新项目并安装依赖： ng new angular-ngrx-todolist --standalone=false npm install @ngrx/store @ngrx/store-devtools
1.5K10编辑于 2024-01-26 - 来自专栏前端加油站
angular4实战（4）ngrx
https://blog.csdn.net/j_bleach/article/details/78161765 ngrx ngrx是angular的状态管理库，与 本次演示的示例为通过ngrx的状态管理来控制HTTP请求服务的全局loading动画显示。 如下： ngrx地址：https://github.com/ngrx ngrx主要有四个模块，分别是 ngrx/store， ngrx/effects， ngrx/router-store ， ngrx/store-devtools 本次实例用的是ngrx 4.x版本，因为没有跟路由关联，也没有复杂的行为，只用到了ngrx/store。 ngrx和react-redux本质没什么区别。 定义loading的action和reducer 在项目中创建ngrx文件夹，并在之下创建action和reducer文件。
2.4K30发布于 2019-07-02 - 来自专栏前端开发
深入理解 @ngrx/effects 中 ofType 的用法与使用场景
在 Angular 应用中，使用 @ngrx/effects 的目的是处理带有副作用的逻辑，比如与服务端的交互、日志记录或导航操作。 而 ofType 是 @ngrx/effects 提供的一个操作符，专门用于筛选特定类型的 Action，帮助开发者更高效地构建可维护的状态管理代码。 什么是 ofTypeofType 是一个用于过滤 Action 流的 RxJS 操作符，它从 @ngrx/effects 模块中导入。 以下是导入 ofType 的方式：import { ofType } from `@ngrx/effects`;使用场景解析1. 在 NGRX 中，Actions 是全局共享的事件流。ofType 通过筛选特定类型的 Action，避免不相关的逻辑干扰，确保副作用处理的精准性。2. 是否可以动态生成类型？
1.9K00编辑于 2025-01-28 - 来自专栏h5
angular聊天IM实例|仿微信angular版|NG2案例
angular8.0仿微信聊天室|angular即时聊天IM系统|仿微信界面angular 运用angular+@angular/cli+@angular/router+@ngrx/store等技术实现开发的移动端聊天室 yanxinyun1990/article/details/94143575 技术架构： MVVM框架：angular8 + @angular/cli + @angular/router 状态管理：@ngrx : "~8.0.3", "@angular/compiler-cli": "~8.0.1", "@angular/language-service": "~8.0.1", "@ngrx /app-routing.module' // 引入状态管理 import { StoreModule } from '@ngrx/store' import { reducer } from '.. /ngrx' // 载入公共组件（component） import { HeaderComponent } from '..
4.2K40发布于 2019-07-16 - 来自专栏网络日志
SAP 电商云 Spartacus UI Store 相关的设计明细
feature selector： 场景2：使用 StoreModule.forFeature 注册 store： 当使用 createSelector 和 createFeatureSelector 函数时，@ngrx 3 的类型必须和 2 的类型一致： 2 的位置其实就是 result 的位置： 写法2 import { createSelector, createFeatureSelector } from '@ngrx
51610编辑于 2024-06-01 - 来自专栏前端开发
探索 @ngrx/effects 中的 createEffect 用法与场景
在 Angular 开发中，@ngrx/effects 是管理应用程序副作用（side effects）的重要工具。 Effects 是 @ngrx/effects 的核心概念，用于监听特定的 Actions 并触发某些副作用操作，比如调用 API 或导航到其他页面。 语法和基本用法createEffect 的基本语法如下：import { createEffect } from '@ngrx/effects';const effect = createEffect( 创建 Effectimport { Injectable } from '@angular/core';import { Actions, createEffect, ofType } from '@ngrx > { return this.http.get<any[]>(this.apiUrl); }}Reducer 更新状态import { createReducer, on } from '@ngrx
31710编辑于 2025-07-14 - 来自专栏WindCoder
一个Angular 5教程：一步一步指导实现你的第一个Angular 5应用程序
State是一个单一的，不可变的数据结构 - 至少Ngrx为我们实现它的方式。Ngrx是由Redux提供灵感的“RxJS支持Angular应用程序的状态管理库”。 Ngrx的灵感来自Redux。 为此，让我们在我们的控制台中运行： yarn add @ngrx/core @ngrx/store ngrx-store-logger yarn add v1.3.2 [1/4] ? └─ @ngrx/store@4.1.1 └─ ngrx-store-logger@0.2.0 ✨ Done in 25.47s. Ngrx对救援的副作用。 Ngrx效应 那么什么是副作用？ 什么是NgRX？ NgRX是一种管理应用程序状态的模式。这是一个支持Angular应用程序的RxJS驱动的状态管理库。
48.5K10发布于 2018-09-19 - 来自专栏Nodejs技术栈
写在 2021: 值得关注/学习的前端框架和工具库
NgRx[93]，很好用的Angular的状态管理方案，写法和Redux非常像，也是action >>> reducer >>> state，所以几乎可以没有什么成本的上手。 秉承了Angular的思想，提供了一整套的集成：和Angular Router的集成：@ngrx/router-store；对于集合类型的适配：@ngrx/entity；副作用管理：@ngrx/effects ，以及必不可少的schematics：@ngrx/schematics等，最大的优势是和RxJS的深度集成。 https://github.com/redux-observable/redux-observable [92] Reactive.How: https://reactive.how/ [93] NgRx : https://ngrx.io/ [94] Cypress: https://github.com/cypress-io/cypress [95] PlayWright: https://github.com
5.7K10发布于 2021-06-10 - 来自专栏人工智能
如何利用 AI 工具优化开发流程和时间分配
笔者工作中使用 Angular 进行前端开发： 以笔者上图显示的基于 Ngrx 编写的 effect 类为例，ChatGPT 生成了高质量的单元测试代码： import { TestBed } from throwError } from 'rxjs'; import { hot, cold } from 'jasmine-marbles'; import { provideMockActions } from '@ngrx
1.3K10编辑于 2025-03-29 - 来自专栏HelloGitHub
对开源框架跃跃欲试，却在写的时候犯了难？
mutoe/vue3-realworld-example-app Vue + Nuxt 地址：https://github.com/pocojang/nuxt-realworld Angular + NgRx + Nx 地址：https://github.com/stefanoslig/angular-ngrx-nx-realworld-example-app React + Next + SWR 地址：https
77610编辑于 2022-09-26 - 来自专栏全栈程序员必看
Angular 面试题汇总2-Component/Service (Angular v8+)
对于复杂的全局变量，推荐使用状态管理组件（state management – Ngrx）。
1.4K140编辑于 2022-11-02 - 来自专栏前端侠2.0
【译】Angular中，向子组件传值的5种方式
demo app 的示例来阐述下面5个技术： @Input来响应变化的值 @ViewChild来设置属性 在services中使用BehaviorSubjects 使用Angular Router 使用NgRx
3.1K20发布于 2018-12-19 - 来自专栏start
Angular 实现类似微服务的效果
schema.json", "cli": { "analytics": "e8a7327e-c859-44f3-ae0b-fa7963b5417f", "defaultCollection": "@ngrx
66910编辑于 2024-03-20 - 来自专栏人生得意须尽欢
写在2021: 值得关注/学习的前端框架和工具库
NgRx，很好用的Angular的状态管理方案，写法和Redux非常像，也是action >>> reducer >>> state，所以几乎可以没有什么成本的上手。 秉承了Angular的思想，提供了一整套的集成：和Angular Router的集成：@ngrx/router-store；对于集合类型的适配：@ngrx/entity；副作用管理：@ngrx/effects ，以及必不可少的schematics：@ngrx/schematics等，最大的优势是和RxJS的深度集成。
3.9K10发布于 2021-09-19 - 来自专栏IT大咖说
同样做前端，为何差距越来越大？
庆幸的是除了 React 社区，Vue 社区有类似的 Vuex，Angular 社区有 NgRx 也提供了几乎同样的能力，甚至 NgRx 还可以无缝使用 redux-devtools 来调试状态变化。
1.7K20发布于 2019-11-27 - 来自专栏CRPER折腾记
Angular 2 + 折腾记 ：(3)初步了解服务及使用
fadeIn], providers: [vehicleFaultService, EventsService] })复制代码 ---- 总结 服务若是结合@Inpu(),@Output()..感觉不需要ngrx
2.1K20发布于 2018-08-28 - 来自专栏前端达人
9 个超实用的 JavaScript 原生插件工具
如果你正在使用 Angular 应用程序，建议使用 Akita，因为与ngrx和ngxs相比，它更容易。
1.6K20发布于 2021-06-16 - 来自专栏漫画前端
给2019前端开发的你5个进阶建议～
庆幸的是除了 React 社区，Vue 社区有类似的 Vuex，Angular 社区有 NgRx 也提供了几乎同样的能力，甚至 NgRx 还可以无缝使用 redux-devtools 来调试状态变化。
1.6K10发布于 2020-12-16 - 来自专栏call_me_R
【译】我是如何学习任意前端框架的
你将学到： 学习如何使用管理状态解决方案，如redux for react, ngrx for angular 2+ 或 vuex for vuejs以及如何将其与客户端应用程序集成 使你的应用更灵活
5K10发布于 2019-07-31 - 来自专栏Web大前端
前端框架选择指南：React vs Vue vs Angular
状态管理： 提供NgRx等库进行状态管理。适合： 大型企业级项目，需要严格结构和规范的团队。
1K00编辑于 2024-08-17
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号