DEV Community: Mohamed Abdelgwad

Angular: Manage RxJS Subscriptions Declaratively

Mohamed Abdelgwad — Thu, 21 Apr 2022 18:19:58 +0000

Introduction
For the sake of discussion, I'll use Angular for my examples because it's more common to see RxJS in Angular application.

Managing Subscriptions is very important for your application performance. When you subscribe to an Observable, you register a callback function in the observable and the observable will maintain its callback lists. This can cause memory leak if you don't unsubscribe when your logic is done.

Let's give you an example. It's common to subscribe to different kind of observables in ngOnInit.

ngOnInit () {
  this.service.users$.subscribe(nextCb, errorCb, completeCb)
 }

but what if you navigate to a different route and went back to this component ? you will subscribe again and again.

Someone would say "Hmmm I'll save the subscription in a variable and unsubscribe in ngOnDestroy ".

users$

ngOnInit () {
  this.users$ = this.service.users$.subscribe(nextCb, errorCb, 
  completeCb)
 }
ngOnDestry(){
  this.users$.unsubscribe()
}

Technically you are right but what if there are multiple subscriptions ? Things will get messy real quick.

ngOnDestry(){
  this.variable1$.unsubscribe()
  this.variable2$.unsubscribe()
  this.variable3$.unsubscribe()
....
}

RxJS oberator takeUntil can be useful to declaratively remove your subscription

| Emits the values emitted by the source Observable until a notifier Observable emits a value.


@Component({ ... })
export class AppComponent implements OnInit, OnDestroy {
  destroy$: Subject<boolean> = new Subject<boolean>();

  constructor(private service: Service) {}

  ngOnInit() {
    this.service.users$
    .pipe(takeUntil(this.destroy$))
    .subscribe(({data}) => {
      console.log(data);
    });

 this.productsService.products$
    .pipe(takeUntil(this.destroy$))
    .subscribe(({data}) => {
      console.log(data);
    });
  }

  ngOnDestroy() {
    this.destroy$.next(true);
    this.destroy$.unsubscribe();
  }
}

is this the best way? Actually it's very good trick if you must subscribe to an observable inside a function. Optimally, you should let Angular handle your subscription for you using async pipe. this is very helpful because you will not need to subscribe in the .ts file anymore

here is an example from Deborah Kurata's github

export class ProductListComponent {
  pageTitle = 'Product List';
  private errorMessageSubject = new Subject<string>();
  errorMessage$ = this.errorMessageSubject.asObservable();

  private categorySelectedSubject = new BehaviorSubject<number>(0);
  categorySelectedAction$ = this.categorySelectedSubject.asObservable();

  products$ = combineLatest([
    this.productService.productsWithAdd$,
    this.categorySelectedAction$
  ])
    .pipe(
      map(([products, selectedCategoryId]) =>
        products.filter(product =>
          selectedCategoryId ? product.categoryId === selectedCategoryId : true
        )),
      catchError(err => {
        this.errorMessageSubject.next(err);
        return EMPTY;
      })
    );

  categories$ = this.productCategoryService.productCategories$
    .pipe(
      catchError(err => {
        this.errorMessageSubject.next(err);
        return EMPTY;
      })
    );

  vm$ = combineLatest([
    this.products$,
    this.categories$
  ])
    .pipe(
      map(([products, categories]) =>
        ({ products, categories }))
    );

  constructor(private productService: ProductService,
              private productCategoryService: ProductCategoryService) { }

  onAdd(): void {
    this.productService.addProduct();
  }

  onSelected(categoryId: string): void {
    this.categorySelectedSubject.next(+categoryId);
  }
}

In the previous example, the user can select a category and see the products in this category. all this logic without a single .subscribe() in the .ts file. All subscription are handled with async pipe in the template which automatically unsubscribe for you when it's unmounted.

Misconceptions of `this`

Mohamed Abdelgwad — Thu, 01 Jul 2021 23:55:50 +0000

Hello friends,

let's start with what is not this...

this isn't bound to :

1- the object this appears within.

2- the function this appears within.

3- a new instance of the function this appears within.

The keyword this itself doesn't have a value. JS interpreter binds the value of this when its parent function gets invoked. but would you always trust the JS interpreter to bind the value of this to the right object automatically? ... I wouldn't.

In other words, when someone shows you a code and asks you:

what is the value of this here ?

the right answer would be:

show me where the parent function is invoked.

I'll try to sum it up in 5 scenarios:

1. The global object or undefined

If the function is called with no context:

function displayName() {
  console.log(this);
}
displayName(); // {}

In the code above, the value of this inside displayName() is either the global object or, if in strict mode, it's undefined.

2. A context object

If the function is a method of an object:

const player = {
  name: "Mohamed",
  displayName: function () {
    console.log(this.name);
  },
};
player.displayName(); // "Mohamed"

In the code above, the value of this inside displayName() will refer to player which actually makes sense because you called the method displayName() on the object player. that invocation bound the object player to this inside of the method. good job JS interpreter.

3. A new object

function Square(color) {
  this.color = color;
}
const redSquare = new Square("red");

let's see what the keyword new does behind the scenes.

without using the keywords new and this, you will have to create and return the object manually

function Square(color){
 let obj = {}
 obj.color = color
 return obj
}
const redSquare = Suare("red");

the keyword new actually creates the object for you and binds that object to this... then return it

function Square(color){
 ̶l̶e̶t̶ ̶t̶h̶i̶s̶ ̶=̶ ̶O̶b̶j̶e̶c̶t̶.̶c̶r̶e̶a̶t̶e̶(̶S̶q̶u̶a̶r̶e̶.̶p̶r̶o̶t̶o̶t̶y̶p̶e̶)̶; //{}
 this.color = color;
 ̶r̶e̶t̶u̶r̶n̶ ̶t̶h̶i̶s̶; 
}
const redSquare =new Square("red");

In the code above, the value of this inside the function is a newly created empty object.

4. A specified object

So far we have been saying that JS interpreter does all the work automatically for us... do we have control over the value of this ?
Actually, YES we do
we have two 3 methods to change the value of this

.call() and .apply() methods

const player = {
  name: "Mohamed",
  displayName: function () {
    console.log(this.name);
  },
};

const anotherPlayer = { name: "ahmed" };
player.displayName.call(anotherPlayer); // "ahmed"

same as

player.displayName.apply(anotherPlayer)

In the code above, the value of this inside displayName() will refer to anotherPlayer since the first parameter of call() or "apply() is to explicitly set what this refers to.

.bind()

bind() method is a little bit different because it returns the same function after it sets the value of this to whatever you want

const player = {
  name: "Mohamed",
  displayName: function () {
    console.log(this.name);
  },
};

const anotherPlayer = { name: "ahmed" };
const displayName = player.displayName.bind(anotherPlayer);
displayName(); // "ahmed"

In the code above, bind() set the value of this inside player.display to anotherPlayer and returned a whole new function.

.... wait what ... why would I use bind()...I'll stick to call() and apply().

let's say you have this code, a simple function that takes a callback and call it twice.

const player = {
  name: "Mohamed",
  displayName: function () {
    console.log(this.name);
  },
};

function callTwice(cb) {
  cb();
  cb();
}

callTwice(player.displayName);

what do you expect ?? you passed the right function... but look where it's invoked !
the output would be according to rule number # 1

undefined
undefined

In the code above, the value of this will be the global object because that's how its parent function got invoked.

Don't worry... bind() to the rescue

const callback = player.displayName.bind(player);
callTwice(callback); // "Mohamed" 
                     // "Mohamed"

5. `this` inside arrow function

With regular functions, the value of this is set based on how the function is called. With arrow functions, the value of this is based on the function's surrounding context. In other words, the value of this inside an arrow function is the same as the value of this outside the function then apply the rules we mentioned earlier.

for more readings

1- Apply MDN

2- Call MDN

3- Bind MDN

Free APIs for beginners

Mohamed Abdelgwad — Mon, 22 Mar 2021 19:39:11 +0000

Hello, this my first article on Dev
When you start learning react or any framework, you would like to use some free APIs instead of creating dummy data or even learning how to integrate with APIs

let's start with my favorite one ...

1- Quotes API
This API allows you to get a random quote every time you make a get request or a list of quotes and much more

response:

{"_id":"EBX5NXqc-R6-","tags":["famous-quotes"],"content":"Six essential qualities that are the key to success: Sincerity, personal integrity, humility, courtesy, wisdom, charity.","author":"William C. Menninger","authorSlug":"william-c-menninger","length":120}

you can read more in their Github

2- FakeStore API

This API is very useful if you want to learn about routing. For Example, your homepage should make a request to get all products 'https://fakestoreapi.com/products and in your product page you request a single product by Id 'https://fakestoreapi.com/products/1

Don't forget to check the docs

3- RandomUser
send a get request to https://randomuser.me/api/ voila, you got a random user ... now go finish that profile page.

not only that, you can also request a specific nationality by providing a nat query :yay: https://randomuser.me/api/?nat=us,dk,fr,gb

4- WeatherAPI

this one is free but you need to sign up first... with a limited number of requests (1000 Calls / month)

5- NewsAPI
You need to signup first to get an API key,
for example
https://newsapi.org/v2/everything?q=apple&from=2021-03-23&to=2021-03-23&sortBy=popularity&apiKey=API_KEY

6-Todo list
creating a todo list ? don't bother with dummy data, here is your free api

7- MetaWeather

...

I'll keep updating this article when I find any free APIs
if you have anything in mind, great! let me know in the comments