Introduction to NgRx Effects
Learn the fundamentals of NgRx Effects.
What are effects?
In general, the components of an Angular application perform side effects through services. In our course project, the ProductsComponent
retrieves data from the server via the ProductsService
as follows:
import { Component, OnInit } from '@angular/core';import { ProductsService } from '../products.service';import { Store } from '@ngrx/store';import { getProductsAction } from './state/products.actions';import { getProductsSelector } from './state/products.selectors';import { AppState, Product } from '../app.interfaces';@Component({selector: 'app-products',templateUrl: './products.component.html',styleUrls: ['./products.component.scss'],})export class ProductsComponent implements OnInit {products$ = this.store.select<Product[]>(getProductsSelector);constructor(private store: Store<AppState>, private productsService: ProductsService) {}ngOnInit() {this.getProducts();}getProducts() {this.productsService.getProducts().subscribe((products: Product[]) => (this.store.dispatch(getProductsAction({ products }))));}}
Retrieving products data from the server
In large applications, a component may need to handle multiple services that may become difficult to maintain over time. To overcome ...
Get hands-on with 1400+ tech skills courses.