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

Clear the cache of a query in React Query without having to fetch it again

What causes .obj files to not respond to directional light in three.js?

Utilizing stored data to display multiple markers on Google Maps with Node, MongoDB, Express, and EJS

jquery activating the toggle function to switch between child elements

encountering difficulties resolving dependency tree when attempting to generate a new Angular project

Change the class name using jQuery when scrolling

Eradicate white space in a JavaScript code

Obtaining the component instance ('this') from a template

Any ideas on how to format a date for jQuery Datepicker?

Stylist in Visual Studio Code for React applications

Utilize dynamic Google Maps markers in Angular by incorporating HTTP requests

Importing dynamically into Ionic 2 from locations other than the "node_modules" directory

Error encountered while attempting to save a Mongoose post on Heroku, although it is successful

Set panning value back to default in Ionic

Explore an array of elements to find the correct objectId stored in mongodb

Is it better to use relative or absolute resource scripts in an AngularJS application?

The modal stubbornly refuses to close

Passing the value of a radio button to a component in React: a comprehensive guide

Error Encountered When Running JavaScript Code

Injecting a service into an Angular constant is a straightforward process that involves