Tips for preventing repetition in http subscribe blocks across various components

Question

Tips for preventing repetition in http subscribe blocks across various components

Imagine a scenario where there is a service used for making HTTP request calls. There are two different components (which could be more than two) that need to send the same request using the same observables via this service. After receiving the result, it should be assigned to a global variable. These components do not have any direct relationship, like parent-child or child-parent. Is there a more efficient way to write this function once and reuse it across all components?

Service

  getStudents() {
    const requestUrl = this.apiUrl + 'students/';
    return this.httpClient.get(requestUrl);
  }

Component1

  studentList:Student[]=[];
  getStudents.subscribe((students:Student[])=>{
      this.studentList=students;
      //Some operations
  })

Component2

  studentList:Student[]=[];
  getStudents.subscribe((students:Student[])=>{
       //Some operations 
  this.studentList=students;
  })

javascript angular typescript rxjs

Answer 1

Answer №1

I'm not particularly fond of utilizing global state, however, if the goal is to keep a consistent list of students across various components using global state, then it might be best for that state to reside within a service rather than being scattered among individual components.

For instance:

Service


studentList: Student[] = [];

setStudents(students: Student[]) {
  this.studentList = students;
  // Any actions related to updating student list
}

updateStudents() {
  const requestUrl = this.apiUrl + 'students/';
  return this.httpClient.get(requestUrl).pipe(
    tap(this.setStudents)
  );
}

Component

ngOnInit(){
  this.service.updateStudents().subscribe();
}

Answer 2

I'm not particularly fond of utilizing global state, however, if the goal is to keep a consistent list of students across various components using global state, then it might be best for that state to reside within a service rather than being scattered among individual components.

For instance:

Service


studentList: Student[] = [];

setStudents(students: Student[]) {
  this.studentList = students;
  // Any actions related to updating student list
}

updateStudents() {
  const requestUrl = this.apiUrl + 'students/';
  return this.httpClient.get(requestUrl).pipe(
    tap(this.setStudents)
  );
}

Component

ngOnInit(){
  this.service.updateStudents().subscribe();
}

Answer 3

Answer №2

One way to handle data flow in your application is by using an Observable inside your service.

studentsReceived:Subject = new Subject();

When the getStundent() method is successful, you can emit the next value of studentsReceived.

By subscribing to the studentsReceived inside your components, you can receive notifications after a successful API call.

studentRecived.subscribe(data=>{ // add your code here })

Remember to call the getStudent() method on a higher component like AppComponent to initiate the data fetching process.

Answer 4

One way to handle data flow in your application is by using an Observable inside your service.

studentsReceived:Subject = new Subject();

When the getStundent() method is successful, you can emit the next value of studentsReceived.

By subscribing to the studentsReceived inside your components, you can receive notifications after a successful API call.

studentRecived.subscribe(data=>{ // add your code here })

Remember to call the getStudent() method on a higher component like AppComponent to initiate the data fetching process.

Answer 5

Answer №3

Here are 2 key points to consider:

1) To avoid repeating the same block of code, create a method in the service file and call it in the component. For example:

SERVICE:

createSubscription(componentVariableName) {
  this.yourObservable.subscribe(subscribedValue => {
     componentVariableName = subscribedValue;
  })
}

In your Component:

yourComponentMethod() {
  this.service.createSubscription(this.studentLists);
}


************

2) To minimize service calls, utilize Behavior Subject to store values rather than repeatedly making API calls. Here's an example:

private initialValuesForObservable: YourObjectModel = {}; // or null;

private observableSource: BehaviorSubject<YourObjectModel> = 
  new BehaviorSubject<YourObjectModel>(this.initialValuesForObservable);

public subscribableObservable: Observable<YourObjectModel> = 
  this.observableSource.asObservable();


setObservableValue(data: YourObjectModel) {
  this.observableSource.next(data);
}

getObservableData() {
  return this.subscribableObservable;
}



In your COMPONENT:

this.service.getObservableData().subscribe(latestObservableData => {
  this.schoolList = latestObservableData;
});

Answer 6

Here are 2 key points to consider:

1) To avoid repeating the same block of code, create a method in the service file and call it in the component. For example:

SERVICE:

createSubscription(componentVariableName) {
  this.yourObservable.subscribe(subscribedValue => {
     componentVariableName = subscribedValue;
  })
}

In your Component:

yourComponentMethod() {
  this.service.createSubscription(this.studentLists);
}


************

2) To minimize service calls, utilize Behavior Subject to store values rather than repeatedly making API calls. Here's an example:

private initialValuesForObservable: YourObjectModel = {}; // or null;

private observableSource: BehaviorSubject<YourObjectModel> = 
  new BehaviorSubject<YourObjectModel>(this.initialValuesForObservable);

public subscribableObservable: Observable<YourObjectModel> = 
  this.observableSource.asObservable();


setObservableValue(data: YourObjectModel) {
  this.observableSource.next(data);
}

getObservableData() {
  return this.subscribableObservable;
}



In your COMPONENT:

this.service.getObservableData().subscribe(latestObservableData => {
  this.schoolList = latestObservableData;
});

Tips for preventing repetition in http subscribe blocks across various components

Answer №1

Service

Component

Answer №2

Answer №3

Similar questions

What is the best way to choose a key from a discriminated union type?

What is the process for adjusting the color of axes in vue-chartjs?

obtainServerSideProps query parameter

Creating a ref with Typescript and styled-components: A comprehensive guide

Angular input form is throwing an error because it is unable to retrieve the property 'name' of an undefined value

Is there a way to locate a parent class starting from a child class, and subsequently track down another child class from the parent?

Sending various data from dialog box in Angular 8

The Service Worker seems to be neglecting to serve the sub-pages at

Experiencing a problem in AngularJS 2 after including 'routing' in the imports section of app.module.ts

What are the steps involved in incorporating a REST API on the client side?

The functionality of Material UI tooltip is not functioning properly when accessed on mobile devices

ng-bind-html is having trouble parsing the HTML correctly and binding it

Having trouble getting datatables.net to function properly with JavaScript

Step-by-step guide on setting fa fa-check as the background image for the selected field in Angular 4 with ng-select

Node.js project that was once functional is now encountering issues with the error message: "Error: Route.post() requires a callback function but received [object Undefined]."

Creating a custom autocomplete search using Angular's pipes and input

Challenges with Angular directive scopes

What is the reasoning behind storing type definitions in the @types namespace within npm?

Saving data in multiple collections using MongoDB and Node.js: A comprehensive guide

Issues with incorrect source path in Typescript, Gulp, and Sourcemaps configuration