Maîtriser la gestion de l'état angulaire à l'aide de NgRx

La

Gestion de l'état dans Angular garantit que les données sont partagées de manière cohérente et efficace dans toutes les parties d'une application. Au lieu que chaque composant gère ses propres données, un magasin central détient l'État.

Cette centralisation garantit que lorsque les données changent, tous les composants reflètent automatiquement l'état mis à jour, ce qui conduit à un comportement cohérent et à un code plus simple. Cela facilite également la maintenance et la mise à l'échelle de l'application, car le flux de données est géré à partir d'une source unique de vérité.

Dans cet article, nous explorerons comment implémenter la gestion de l'état dans Angular à l'aide de NgRx en créant une application simple de panier d'achat. Nous couvrirons les concepts de base de NgRx, tels que le Store, les actions, les réducteurs, les sélecteurs, et les Effets, et démontrerons comment ces éléments s'assemblent pour gérer l'état de votre application. efficacement.

L'

État en Angular fait référence aux données que votre application doit gérer et afficher, comme le contenu d'un panier.

Pourquoi vous avez besoin d'une gestion d'état

1. Cohérence : Cela garantit que les données sont uniformes dans tous les composants. Lorsque les données changent en un seul endroit, le magasin central met automatiquement à jour tous les composants pertinents, évitant ainsi les incohérences.

2. Flux de données simplifié : Au lieu de transmettre manuellement les données entre les composants, la gestion de l'état permet à n'importe quel composant d'accéder ou de mettre à jour les données directement à partir du magasin central, ce qui rend le flux de données de l'application plus facile à gérer et à comprendre.

3. Maintenance et évolutivité plus faciles : En centralisant la gestion des données, la gestion de l'état réduit la duplication et la complexité du code. Cela rend l'application plus facile à maintenir, à déboguer et à faire évoluer à mesure qu'elle se développe.

4. Optimisation des performances : Les solutions de gestion d'état sont souvent accompagnées d'outils permettant d'optimiser les performances, tels que la mise à jour sélective uniquement des composants qui doivent réagir à un changement d'état, plutôt que de restituer l'intégralité de l'application.

Comment fonctionne NgRx

NgRx est une bibliothèque de gestion d'état pour Angular qui permet de gérer et de maintenir l'état de votre application de manière prévisible.

1. Composant

Le composant est l'endroit où l'utilisateur interagit avec votre application. Il peut s'agir d'un bouton permettant d'ajouter un article au panier.

Les composants et les services sont séparés et ne communiquent pas directement entre eux, mais les services sont utilisés dans les effets créant ainsi une structure d'application différente d'une application angulaire traditionnelle.

2. Action

Une action décrit ce qui s'est passé et contient toute charge utile (données) nécessaire.

3. Réducteur

Mise à jour l'état en fonction de l'action.

4. Magasin

Le store est un lieu centralisé qui détient l'intégralité de l'état de votre application.

5. Sélecteur

Extrait les données du magasin pour les composants.

6. Effets

Les effets sont l'endroit où vous gérez la logique qui n'appartient pas au réducteur, comme les appels API.

7. Service

Les services exécutent la logique métier ou les appels d'API. Les effets utilisent souvent des services pour effectuer des tâches telles que récupérer des données sur un serveur.

Quand utiliser NgRx

Utilisez NgRx lorsque la complexité de votre application le justifie, mais pour les applications simples, tenez-vous-en à des méthodes de gestion d'état plus simples. Les liaisons services, signaux et @Input/@Output d'Angular entre les composants sont généralement suffisantes pour gérer l'état dans des applications moins complexes.

Exemple : création d'une fonctionnalité d'ajout au panier avec NgRx

1.Créer un nouveau projet angulaire :

ng new shopping-cart

2. Installez NGRX et effets
Pour installer NGRX et Effects, exécutez la commande suivante dans votre terminal :

ng add @ngrx/store@latest

ng add @ngrx/effects

3. Définir le modèle de produit
Dans le répertoire src/app, créez un fichier nommé product.model.ts

Définir l'interface Produit pour représenter la structure d'un produit :

export interface Product {
    id: string;
    name: string;
    price: number;
    quantity: number;
}

4. Configurer la gestion de l'état
Étape 1 : Créer un dossier d'état dans le répertoire src/app

Étape 2 : Définir les actions du panier

Créez cart.actions.ts dans le dossier d'état.

import { createActionGroup, emptyProps, props } from '@ngrx/store';
import { Product } from '../product.model';

export const CartActions = createActionGroup({
  source: 'Cart',
  events: {
    'Add Product': props<{ product: Product }>(),
    'Remove Product': props<{ productId: string }>(),
    'Update Quantity': props<{ productId: string; quantity: number }>(),
    'Load Products': emptyProps,
  },
});

export const CartApiActions = createActionGroup({
  source: 'Cart API',
  events: {
    'Load Products Success': props<{ products: Product[] }>(),
    'Load Products Failure': props<{ error: string }>(),
  },
});

Étape 3 : Créer des réducteurs

Créez cart.reducer.ts dans le dossier state.

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
    )
  )
);

Étape 4 : Créer des sélecteurs

Dans le dossier state, créez cart.selectors.ts

import { createSelector, createFeatureSelector } from '@ngrx/store';
import { Product } from '../product.model';

export const selectProducts = createFeatureSelector<ReadonlyArray<Product>>('products');

export const selectCart = createFeatureSelector<ReadonlyArray<Product>>('cart');

export const selectCartTotal = createSelector(selectCart, (cart) =>
  cart.reduce((total, product) => total + product.price * product.quantity, 0)
);

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<Product>> {
    return of([
      { id: '1', name: 'Product 1', price: 10, quantity: 1 },
      { id: '2', name: 'Product 2', price: 20, quantity: 1 },
    ]);
  }
}

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<Product>>;

  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 }));
  }
}

Modify the product-list.component.html file:

<div *ngIf="products$ | async as products">
  <div class="product-item" *ngFor="let product of products">
    <p>{{product.name}}</p>
    <span>{{product.price | currency}}</span>
    <button (click)="onAddToCart(product)" 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<Product>>;
  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 }));
  }
}

Modify the shopping-cart.component.html file:

<div *ngIf="cart$ | async as cart">
  <div class="cart-item" *ngFor="let product of cart">
    <p>{{product.name}}</p><span>{{product.price | currency}}</span>
    <input type="number" [value]="product.quantity" (input)="onQuantityChange($event, product.id)" />
    <button (click)="onRemoveFromCart(product.id)" 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>Products</h2>
<app-product-list></app-product-list>

<h2>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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!