Angular 中的
状态管理可确保数据在应用程序的所有部分之间一致且高效地共享。中央存储保存状态,而不是每个组件管理自己的数据。
这种集中化确保当数据发生变化时,所有组件都会自动反映更新后的状态,从而实现一致的行为和更简单的代码。它还使应用程序更易于维护和扩展,因为数据流是从单一事实来源进行管理的。
在本文中,我们将通过构建一个简单的购物车应用程序来探索如何使用 NgRx 在 Angular 中实现状态管理。我们将介绍 NgRx 的核心概念,例如 Store、Actions、Reducers、Selectors、 和 Effects,并演示这些部分如何组合在一起来管理应用程序的状态有效。
Angular 中的状态 是指您的应用需要管理和显示的数据,例如购物车的内容。
为什么需要状态管理
1。一致性: 它确保所有组件中的数据是统一的。当一处数据发生变化时,中央存储会自动更新所有相关组件,防止不一致。
2。简化的数据流:状态管理允许任何组件直接从中央存储访问或更新数据,而不是在组件之间手动传递数据,从而使应用程序的数据流更易于管理和理解。
3。更轻松的维护和可扩展性:通过集中数据管理,状态管理减少了代码重复和复杂性。这使得应用程序在增长时更容易维护、调试和扩展。
4。性能优化:状态管理解决方案通常附带优化性能的工具,例如有选择地仅更新需要对状态变化做出反应的组件,而不是重新渲染整个应用程序。
NgRx 的工作原理
NgRx 是 Angular 的状态管理库,可帮助以可预测的方式管理和维护应用程序的状态。
1。组件
组件是用户与您的应用程序交互的地方。它可能是一个将商品添加到购物车的按钮。
组件和服务是分开的,不直接相互通信,而是在效果中使用服务,从而创建与传统Angular应用程序不同的应用程序结构。
2。行动
操作描述发生的事情并包含任何必要的有效负载(数据)。
3。减速器
根据操作更新状态。
4。商店
商店是一个集中的地方,保存应用程序的整个状态。
5。选择器
从组件存储中提取数据。
6。效果
效果是你处理不属于reducer的逻辑的地方,比如API调用。
7。服务
服务执行实际的业务逻辑或 API 调用。效果通常使用服务来执行任务,例如从服务器获取数据。
何时使用 NgRx
当应用程序的复杂性证明合理时,请使用 NgRx,但对于简单的应用程序,请坚持使用更简单的状态管理方法。 Angular 的 services、signals 和 @Input/@Output 组件之间的绑定通常足以管理不太复杂的应用程序中的状态。
示例:使用 NgRx 构建“添加到购物车”功能
1.创建一个新的 Angular 项目:
ng new shopping-cart
2。安装 NGRX 和效果
要安装 NGRX 和 Effects,请在终端中运行以下命令:
ng add @ngrx/store@latest ng add @ngrx/effects
3。定义产品模型
在 src/app 目录中,创建一个名为 product.model.ts
定义Product接口来表示产品的结构:
export interface Product { id: string; name: string; price: number; quantity: number; }
4。设置状态管理
第 1 步:在 src/app 目录中创建 state 文件夹
第 2 步:定义购物车操作
在状态文件夹中创建cart.actions.ts。
import { createActionGroup, emptyProps, props } from '@ngrx/store'; import { Product } from '../product.model'; export const CartActions = createActionGroup({ source: 'Cart', events: { 'Add Product': props(), 'Remove Product': props(), 'Update Quantity': props(), 'Load Products': emptyProps, }, }); export const CartApiActions = createActionGroup({ source: 'Cart API', events: { 'Load Products Success': props(), 'Load Products Failure': props(), }, });
第3步:创建Reducers
在 state 文件夹中创建 cart.reducer.ts。
import { createReducer, on } from '@ngrx/store'; import { Product } from '../product.model'; import { CartActions, CartApiActions } from './cart.actions'; // Initial state for products and cart export const initialProductsState: ReadonlyArray<product> = []; export const initialCartState: ReadonlyArray<product> = []; // Reducer for products (fetched from API) export const productsReducer = createReducer( initialProductsState, on(CartApiActions.loadProductsSuccess, (_state, { products }) => products) ); // Reducer for cart (initially empty) export const cartReducer = createReducer( initialCartState, on(CartActions.addProduct, (state, { product }) => { const existingProduct = state.find(p => p.id === product.id); if (existingProduct) { return state.map(p => p.id === product.id ? { ...p, quantity: p.quantity + product.quantity } : p ); } return [...state, product]; }), on(CartActions.removeProduct, (state, { productId }) => state.filter(p => p.id !== productId) ), on(CartActions.updateQuantity, (state, { productId, quantity }) => state.map(p => p.id === productId ? { ...p, quantity } : p ) ) ); </product></product>
第 4 步:创建选择器
在 state 文件夹中,创建 cart.selectors.ts
import { createSelector, createFeatureSelector } from '@ngrx/store'; import { Product } from '../product.model'; export const selectProducts = createFeatureSelector<readonlyarray>>('products'); export const selectCart = createFeatureSelector<readonlyarray>>('cart'); export const selectCartTotal = createSelector(selectCart, (cart) => cart.reduce((total, product) => total + product.price * product.quantity, 0) ); </readonlyarray></readonlyarray>
Step 5: Create Effects
Create a new file cart.effects.ts in the state folder that listens for the Load Products action, uses the service to fetch products, and dispatches either a success or failure action.
import { Injectable } from '@angular/core'; import { Actions, createEffect, ofType } from '@ngrx/effects'; import { ProductService } from '../product.service'; import { CartActions, CartApiActions } from './cart.actions'; import { catchError, map, mergeMap } from 'rxjs/operators'; import { of } from 'rxjs'; @Injectable() export class CartEffects { loadProducts$ = createEffect(() => this.actions$.pipe( ofType(CartActions.loadProducts), mergeMap(() => this.productService.getProducts().pipe( map(products => CartApiActions.loadProductsSuccess({ products })), catchError(error => of(CartApiActions.loadProductsFailure({ error }))) ) ) ) ); constructor( private actions$: Actions, private productService: ProductService ) {} }
5. Connect the State Management to Your App
In a file called app.config.ts, set up configurations for providing the store and effects to the application.
import { ApplicationConfig } from '@angular/core'; import { provideStore } from '@ngrx/store'; import { provideHttpClient } from '@angular/common/http'; import { cartReducer, productsReducer } from './state/cart.reducer'; import { provideEffects } from '@ngrx/effects'; import { CartEffects } from './state/cart.effects'; export const appConfig: ApplicationConfig = { providers: [ provideStore({ products: productsReducer, cart: cartReducer }), provideHttpClient(), provideEffects([CartEffects]) ], };
6. Create a Service to Fetch Products
In the src/app directory create product.service.ts to implement the service to fetch products
import { Injectable } from '@angular/core'; import { Observable, of } from 'rxjs'; import { Product } from './product.model'; @Injectable({ providedIn: 'root' }) export class ProductService { getProducts(): Observable<array>> { return of([ { id: '1', name: 'Product 1', price: 10, quantity: 1 }, { id: '2', name: 'Product 2', price: 20, quantity: 1 }, ]); } } </array>
7. Create the Product List Component
Run the following command to generate the component: ng generate component product-list
This component displays the list of products and allows adding them to the cart.
Modify the product-list.component.ts file:
import { Component, OnInit } from '@angular/core'; import { CommonModule } from '@angular/common'; import { Store } from '@ngrx/store'; import { Observable } from 'rxjs'; import { Product } from '../product.model'; import { selectProducts } from '../state/cart.selectors'; import { CartActions } from '../state/cart.actions'; @Component({ selector: 'app-product-list', standalone: true, templateUrl: './product-list.component.html', styleUrls: ['./product-list.component.css'], imports: [CommonModule], }) export class ProductListComponent implements OnInit { products$!: Observable<readonlyarray>>; constructor(private store: Store) { } ngOnInit(): void { this.store.dispatch(CartActions.loadProducts()); // Dispatch load products action this.products$ = this.store.select(selectProducts); // Select products from the store } onAddToCart(product: Product) { this.store.dispatch(CartActions.addProduct({ product })); } } </readonlyarray>
Modify the product-list.component.html file:
<div async as products> <div class="product-item" product of products> <p>{{product.name}}</p> <span>{{product.price | currency}}</span> <button data-test="add-button">Add to Cart</button> </div> </div>
8. Create the Shopping Cart Component
Run the following command to generate the component: ng generate component shopping-cart
This component displays the products in the cart and allows updating the quantity or removing items from the cart.
Modify the shopping-cart.component.ts file:
import { Component, OnInit } from '@angular/core'; import { CommonModule } from '@angular/common'; import { Store } from '@ngrx/store'; import { Observable } from 'rxjs'; import { Product } from '../product.model'; import { selectCart, selectCartTotal } from '../state/cart.selectors'; import { CartActions } from '../state/cart.actions'; @Component({ selector: 'app-shopping-cart', standalone: true, imports: [CommonModule], templateUrl: './shopping-cart.component.html', styleUrls: ['./shopping-cart.component.css'], }) export class ShoppingCartComponent implements OnInit { cart$: Observable<readonlyarray>>; cartTotal$: Observable<number>; constructor(private store: Store) { this.cart$ = this.store.select(selectCart); this.cartTotal$ = this.store.select(selectCartTotal); } ngOnInit(): void {} onRemoveFromCart(productId: string) { this.store.dispatch(CartActions.removeProduct({ productId })); } onQuantityChange(event: Event, productId: string) { const inputElement = event.target as HTMLInputElement; let quantity = parseInt(inputElement.value, 10); this.store.dispatch(CartActions.updateQuantity({ productId, quantity })); } } </number></readonlyarray>
Modify the shopping-cart.component.html file:
<div async as cart> <div class="cart-item" product of cart> <p>{{product.name}}</p> <span>{{product.price | currency}}</span> <input type="number" product.id> <button data-test="remove-button">Remove</button> </div> <div class="total"> Total: {{cartTotal$ | async | currency}} </div> </div>
Modify the shopping-cart.component.css file:
.cart-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .cart-item p { margin: 0; font-size: 16px; } .cart-item input { width: 50px; text-align: center; } .total { font-weight: bold; margin-top: 20px; }
9. Put Everything Together in the App Component
This component will display the product list and the shopping cart
Modify the app.component.ts file:
import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ProductListComponent } from './product-list/product-list.component'; import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component'; import { NgIf } from '@angular/common'; @Component({ selector: 'app-root', standalone: true, templateUrl: './app.component.html', imports: [CommonModule, ProductListComponent, ShoppingCartComponent, NgIf], }) export class AppComponent {}
Modify the app.component.html file:
<!-- app.component.html --> <h2 id="Products">Products</h2> <app-product-list></app-product-list> <h2 id="Shopping-Cart">Shopping Cart</h2> <app-shopping-cart></app-shopping-cart>
10. Running the Application
Finally, run your application using ng serve.
Now, you can add products to your cart, remove them, or update their quantities.
Conclusion
In this article, we built a simple shopping cart application to demonstrate the core concepts of NgRx, such as the Store, Actions, Reducers, Selectors, and Effects. This example serves as a foundation for understanding how NgRx works and how it can be applied to more complex applications.
As your Angular projects grow in complexity, leveraging NgRx for state management will help you maintain consistency across your application, reduce the likelihood of bugs, and make your codebase easier to maintain.
To get the code for the above project, click the link below:
https://github.com/anthony-kigotho/shopping-cart
以上是使用 NgRx 掌握 Angular 状态管理的详细内容。更多信息请关注PHP中文网其他相关文章!

JavaScript字符串替换方法详解及常见问题解答 本文将探讨两种在JavaScript中替换字符串字符的方法:在JavaScript代码内部替换和在网页HTML内部替换。 在JavaScript代码内部替换字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项,需使用正则表达式并添加全局标志g: str = str.replace(/fi

本教程向您展示了如何将自定义的Google搜索API集成到您的博客或网站中,提供了比标准WordPress主题搜索功能更精致的搜索体验。 令人惊讶的是简单!您将能够将搜索限制为Y

本文系列在2017年中期进行了最新信息和新示例。 在此JSON示例中,我们将研究如何使用JSON格式将简单值存储在文件中。 使用键值对符号,我们可以存储任何类型的

因此,在这里,您准备好了解所有称为Ajax的东西。但是,到底是什么? AJAX一词是指用于创建动态,交互式Web内容的一系列宽松的技术。 Ajax一词,最初由Jesse J创造

增强您的代码演示:开发人员的10个语法荧光笔 在您的网站或博客上共享代码片段是开发人员的常见实践。 选择合适的语法荧光笔可以显着提高可读性和视觉吸引力。 t

利用轻松的网页布局:8个基本插件 jQuery大大简化了网页布局。 本文重点介绍了简化该过程的八个功能强大的JQuery插件,对于手动网站创建特别有用

核心要点 JavaScript 中的 this 通常指代“拥有”该方法的对象,但具体取决于函数的调用方式。 没有当前对象时,this 指代全局对象。在 Web 浏览器中,它由 window 表示。 调用函数时,this 保持全局对象;但调用对象构造函数或其任何方法时,this 指代对象的实例。 可以使用 call()、apply() 和 bind() 等方法更改 this 的上下文。这些方法使用给定的 this 值和参数调用函数。 JavaScript 是一门优秀的编程语言。几年前,这句话可

本文介绍了关于JavaScript和JQuery模型视图控制器(MVC)框架的10多个教程的精选选择,非常适合在新的一年中提高您的网络开发技能。 这些教程涵盖了来自Foundatio的一系列主题


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境

适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能

DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

Atom编辑器mac版下载
最流行的的开源编辑器