Is it necessary to compel subscribers to request data from Service again?

Question

Is it necessary to compel subscribers to request data from Service again?

I have a straightforward setup, consisting of various elements and a singular service [StackBlitz]:

https://i.sstatic.net/y6AFT.png

Service

@Injectable()
export class Service {
  constructor(private http: HttpClient) {}

  saveItem(item: IItem): Observable<IItem> {
    return this.http
               .post<IItem>('/api/item', item)
               .pipe(map(parseDates));
  }

  retrieveItems(): Observable<IItem[]> {
    return this.http
               .get<IItem[]>('/api/item')
               .pipe(map(parseDates));
  }
}

Element0

@Component({
  selector: 'app-element0',
  template: `<app-element1></app-element1>
             <app-element2></app-element2>`,
  styleUrls: []
})
export class Element0 {}

Element1

@Component({
  selector: 'app-element1-create',
  template: `<button (click)="submit()">Submit</button>`,
  styleUrls: []
})
export class Element1 {    
    constructor(private service: Service) { }

    submit() {
        this.service.saveItem({name: 'example'})
                    .subscribe(console.info, console.error)
    }
}

Element2

@Component({
  selector: 'app-element2-list',
  template: `<pre>{{ items | json }}</pre>`,
  styleUrls: []
})
export class Element2 implements OnInit {
    items: IItem[];

    constructor(private service: Service) { }

    ngOnInit() {
        this.service.retrieveItems()
                    .subscribe(items => this.items = items,
                               console.error)
    }
}

Is there a way for Element1 to update Element2 using the Service?

angular typescript rxjs angular-services angular-components

Answer 1

Answer №1

To enhance your component communication, consider adding another observable:

@Injectable()
export class StoreService {

  private _employes$ = new BehaviorSubject<{id:number,employee_name:string,employee_salary:number,employee_age:number}[]>([]);

  constructor(private _http: HttpClient) {
    this.refresh();
  }

  refresh() {
    this._http.get<{id:number,employee_name:string,employee_salary:number,employee_age:number}[]>('https://dummy.restapiexample.com/api/v1/employees').subscribe(
      data => this._employes$.next(data)
    );
  }

  post() {
      const payload = {"name":"test","salary":"123","age":"23"};

      this._http.post('https://dummy.restapiexample.com/api/v1/create', payload).subscribe(() => {
        this.refresh();
      })
  }

  get employes$(): Observable<{id:number,employee_name:string,employee_salary:number,employee_age:number}[]> {
    return this._employes$.asObservable();
  }
}

This setup consists of two main parts:

An Observable used in your store which allows you to update the stream by calling next on it.

private _employes$ = new BehaviorSubject<{...}[]>([]);

A getter method that any component needing updates from the store can subscribe to.

  get employes$(): Observable<{...}[]> {
    return this._employes$.asObservable();
  }

Based on your specific situation, there are different ways to update this internal observable:

The straightforward approach:

refresh() {
    this._http.get<{...}[]>('...').subscribe(
      data => this._employes$.next(data)
    );
  }

In this method, you subscribe to the HTTP call within the service and update the internal observable.

Pros:

Request details are not exposed.
Easy maintenance with a single point for API calls.

Cons:

May not be suitable for cases requiring specific control over API responses.
Subscribing within a service may not always be recommended.

Observable manipulation

If you prefer not to subscribe within the service, you can use the following approach:

return this._http.get<{...}[]>('...')
    .pipe(switchMap(result => {
        this._employes$.next(result);
        return this.employes$;
    }));

This method transforms the HTTP Observable into the internal observable while updating it with the latest API response.

If you require special processing of the API response before making it available across your application, you can do the following:

refresh(myCustomTraitment: = null) {
    return this._http.get<{...}[]>('...')
        .pipe(switchMap(result => {
            if (myCustomTraitment) {
                result = result.map(myCustomTraitment);
            }
            this._employes$.next(result);
            return this._employes$;
        }));
}

Check out this online sample

Answer 2

To enhance your component communication, consider adding another observable:

@Injectable()
export class StoreService {

  private _employes$ = new BehaviorSubject<{id:number,employee_name:string,employee_salary:number,employee_age:number}[]>([]);

  constructor(private _http: HttpClient) {
    this.refresh();
  }

  refresh() {
    this._http.get<{id:number,employee_name:string,employee_salary:number,employee_age:number}[]>('https://dummy.restapiexample.com/api/v1/employees').subscribe(
      data => this._employes$.next(data)
    );
  }

  post() {
      const payload = {"name":"test","salary":"123","age":"23"};

      this._http.post('https://dummy.restapiexample.com/api/v1/create', payload).subscribe(() => {
        this.refresh();
      })
  }

  get employes$(): Observable<{id:number,employee_name:string,employee_salary:number,employee_age:number}[]> {
    return this._employes$.asObservable();
  }
}

This setup consists of two main parts:

An Observable used in your store which allows you to update the stream by calling next on it.

private _employes$ = new BehaviorSubject<{...}[]>([]);

A getter method that any component needing updates from the store can subscribe to.

  get employes$(): Observable<{...}[]> {
    return this._employes$.asObservable();
  }

Based on your specific situation, there are different ways to update this internal observable:

The straightforward approach:

refresh() {
    this._http.get<{...}[]>('...').subscribe(
      data => this._employes$.next(data)
    );
  }

In this method, you subscribe to the HTTP call within the service and update the internal observable.

Pros:

Request details are not exposed.
Easy maintenance with a single point for API calls.

Cons:

May not be suitable for cases requiring specific control over API responses.
Subscribing within a service may not always be recommended.

Observable manipulation

If you prefer not to subscribe within the service, you can use the following approach:

return this._http.get<{...}[]>('...')
    .pipe(switchMap(result => {
        this._employes$.next(result);
        return this.employes$;
    }));

This method transforms the HTTP Observable into the internal observable while updating it with the latest API response.

If you require special processing of the API response before making it available across your application, you can do the following:

refresh(myCustomTraitment: = null) {
    return this._http.get<{...}[]>('...')
        .pipe(switchMap(result => {
            if (myCustomTraitment) {
                result = result.map(myCustomTraitment);
            }
            this._employes$.next(result);
            return this._employes$;
        }));
}

Check out this online sample

Is it necessary to compel subscribers to request data from Service again?

Service

Element0

Element1

Element2

Answer №1

Similar questions

Is there a way to verify if a value is undefined before including it as an object field?

How to conceal an element in Angular using its unique identifier

Integrating Laravel 5.6 with Angular 6 for seamless functionality

Incorporate a new method into a TypeScript class from a separate file

Using curly braces in a fat arrow function can cause it to malfunction

Angular2 and ES6 Promise in JavaScript - tackling the issue of undefined variables

The command "tsc" was not found in this bash session

Mistakes following update to Angular 4 from Angular 2

AngularJS Kendo Date Picker: A Simplified Way to Select

When utilizing Monggose, Angular, and Node, a route containing the deleteOne method repeatedly reports that the object has been successfully deleted, despite the delete count remaining

In Angular 2+, what is the comparable counterpart to Vue's Vuex?

Having trouble retrieving form values in Typescript React, only receiving HTML tag as output

Can data be filtered based on type definitions using Runtime APIs and TypeDefs?

Utilize a ReplaySubject to capture and replay only the most recent value from an observable stream

Executing a Parent Function from a Child Component in Angular 11

Utilizing dynamic data within the ng-template

Arrow functions do not function properly with Typescript decorators

How do I get rid of an unwanted and vulnerable dependency that NPM installed without my consent?

What is the best way to invoke a function in a React component from another component?

implementing a default reducer using ngrx schematics