Mastering State Management with Angular and NgRx/

...

/

Isolating Side Effects from Components

Isolating Side Effects from Components

Learn how to remove the side effects from the ProductsComponent.

We'll cover the following...

Introduction

The purpose of using NgRx Effects is to remove side effects from the Angular components. In our src/app/products/products.component.ts file, we’re using the ProductsService class to fetch product data from the server. In this lesson, we’ll refactor the ProductsComponent to remove the side effects.

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 the products data from the server

Removing side effects

Let’s remove the ...