Is there a way to enhance the functional purity by creating a single function that subscribes and returns a

Question

Is there a way to enhance the functional purity by creating a single function that subscribes and returns a

I'm currently developing a project that involves receiving humidity data from a raspberry pi sensor connected to a backend. Within my Angular Component, I am aiming to display this data in a functional and pure manner. However, I have some doubts regarding my implementation and would greatly appreciate any feedback.

The getAllHumidities() function serves two purposes:

It subscribes to an Observable and returns the data in a functional way.
It also saves the Subscription as "humiditySubscription", albeit as a side effect.

I can't help but feel that the implementation of getAllHumidities() may not be following best practices. Is it possible to avoid creating the two component properties altogether?

export class HumidityListComponent implements OnInit, OnDestroy {

  humidities: Humidity[];
  humiditySubscription: Subscription;

  constructor(private humidityService: HumidityService) {

  }

  ngOnInit() {
    this.humidities = this.getAllHumidities();
  }

  getAllHumidities(): Humidity[] {
    let humidities: Humidity[];
    this.humiditySubscription = this.humidityService.getAll().subscribe(data => {
      humidities = data;
    });
    return humidities;
  }

  ngOnDestroy() {
    this.humiditySubscription.unsubscribe();
  }
}

javascript angular typescript rxjs

Answer 1

Answer №1

Instead of using the getAllHumidities function, you can simplify by subscribing to your service in the onInit method.
By doing this, your humidities variable will always stay updated.

Give this a try:

humidities: Humidity[] = [];

constructor(
   public humidityService: HumidityService
) { }

ngOnInit() {
   this.humidityService.getAll().subscribe((data: Humidity) => {
      this.humidities = data;
   });
}

If you prefer a shorter version in your HTML:

<div *ngIf="(this.humidityService.getAll() | async) as humidities">
   // The slice pipe will display values from index 0 to 5
   <div *ngFor="let humiditie of humidities | slice:0:5; let i = index">
      Index: {{i}} <br> 
      Value: {{humiditie}}
   </div>
</div>

Answer 2

Instead of using the getAllHumidities function, you can simplify by subscribing to your service in the onInit method.
By doing this, your humidities variable will always stay updated.

Give this a try:

humidities: Humidity[] = [];

constructor(
   public humidityService: HumidityService
) { }

ngOnInit() {
   this.humidityService.getAll().subscribe((data: Humidity) => {
      this.humidities = data;
   });
}

If you prefer a shorter version in your HTML:

<div *ngIf="(this.humidityService.getAll() | async) as humidities">
   // The slice pipe will display values from index 0 to 5
   <div *ngFor="let humiditie of humidities | slice:0:5; let i = index">
      Index: {{i}} <br> 
      Value: {{humiditie}}
   </div>
</div>

Answer 3

Answer №2

Understanding the purpose of the return value from the getAllHumidities() function can be a bit unclear. When subscribing, the humidity variable may only update after the function has completed its task.

An efficient way to retrieve and automatically unsubscribe from the observable is by utilizing the async pipe.

In the component:

humidities$: Observable<Humidity[]> = this.humidityService.getAll();

constructor(private humidityService: HumidityService) { }

ngOnInit() { }

In the HTML template:

<ng-container *ngIf="(humidities$ | async) as humidities">
...
use the fetched humidities
...
</ng-container>

For more information about async pipe.

Answer 4

Understanding the purpose of the return value from the getAllHumidities() function can be a bit unclear. When subscribing, the humidity variable may only update after the function has completed its task.

An efficient way to retrieve and automatically unsubscribe from the observable is by utilizing the async pipe.

In the component:

humidities$: Observable<Humidity[]> = this.humidityService.getAll();

constructor(private humidityService: HumidityService) { }

ngOnInit() { }

In the HTML template:

<ng-container *ngIf="(humidities$ | async) as humidities">
...
use the fetched humidities
...
</ng-container>

For more information about async pipe.

Is there a way to enhance the functional purity by creating a single function that subscribes and returns a

Answer №1

Answer №2

Similar questions

Once the table is created in TypeORM, make sure to insert essential master data such as types and statuses

Include a description in the cell of the table

Tips for maintaining user sessions in Passport.js and PhoneGap: "remembering" a user after logging in

I am unable to retrieve values from the req.body object in Node.js

The error "Cannot invoke the indexOf method on an undefined element at order" is being encountered in Javascript

Stop Cross-Site Scripting Attacks by Sanitizing jQuery html()

The module './product' could not be located, resulting in error TS2307

Updating the `link` function to target a specific DOM element within an Angular 2 component

What is the best way for me to bring in this function?

What is the method for pulling information from MySQL and presenting it on a website using Node.js?

How can I use PHP to transform a JSON object containing xy coordinates into an image?

The sessionToken is invalidated upon the user updating their password

The webpage is missing a rendered React component even though it should be displayed

Issues with JQuery list selectors

React Hook Form: Reset function triggers changes across all controllers on the page

Removing specific text from a textarea containing a vast quantity of information

In order to work with Mongoose and Typescript, it is necessary for me to

React Native component that enables users to both input their own text and select options from a dropdown menu as they type

Recursive function in JavaScript with error handling using try-catch block

What is the best method for toggling a class to indicate the active tab in VueJS?