Resetting a Subject entity

Question

Resetting a Subject entity

Is there a way to reset an Observable object? I'm not sure if "reinitialize" is the right term, but essentially what I want is to update the data without creating a new Observable object or new subscriptions.

I want existing subscriptions to seamlessly continue working

@Injectable({
  providedIn: 'root',
})
export class MyService {
  private url = 'http://mydummydomain.com/api/entries';
  private data$: Observable<any>;

  constructor(private http: HttpClient) {
    this.data$ = this.http.get(this.url).pipe(
      shareReplay(1)
    );
  }

  getData(): Observable<any> {
    return this.data$;
  }
  
  reloadData() {
    // TODO:
    // Refresh data from the url
    // This should be a function without any input parameters or return value
  }
}

Appreciate any help on this matter.

angular typescript rxjs rxjs6 rxjs-observables

Answer 1

Answer №1

give this a shot

updateData$ = new Subject<void>();
info$ = this.updateData$.pipe(startWith(null), switchMap(() => this.http.get(this.url)), shareReplay(1));


refreshInfo() {
  updateData$.next();
}

Answer 2

give this a shot

updateData$ = new Subject<void>();
info$ = this.updateData$.pipe(startWith(null), switchMap(() => this.http.get(this.url)), shareReplay(1));


refreshInfo() {
  updateData$.next();
}

Answer 3

Answer №2

Consider using BehaviorSubject to solve your issue without creating a new observable. However, I recommend utilizing ngrx or mobx for data manipulation as it is more convenient. I find it unusual that you have set the data as private and created a getter function; typically, variables in a view are declared as public.

@Injectable({
  providedIn: 'root',
})
export class MyService {
  private url = 'http://mydummydomain.com/api/entries';
  public data$: BehaviorSubject<any> = new BehaviorSubject(null);

  constructor(private http: HttpClient) {
    this.http.get(this.url).pipe(
      take(1)
    ).subscribe((data) => {
      this.data$.next(data);
    });
  }
  
  reloadData() {
    this.http.get(this.url).pipe(
      take(1)
    ).subscribe((data) => {
      this.data$.next(data);
    });
  }
}

It's advisable to centralize your API logic within the service so that the data can be shared across multiple components efficiently when stored in one place.

Answer 4

Consider using BehaviorSubject to solve your issue without creating a new observable. However, I recommend utilizing ngrx or mobx for data manipulation as it is more convenient. I find it unusual that you have set the data as private and created a getter function; typically, variables in a view are declared as public.

@Injectable({
  providedIn: 'root',
})
export class MyService {
  private url = 'http://mydummydomain.com/api/entries';
  public data$: BehaviorSubject<any> = new BehaviorSubject(null);

  constructor(private http: HttpClient) {
    this.http.get(this.url).pipe(
      take(1)
    ).subscribe((data) => {
      this.data$.next(data);
    });
  }
  
  reloadData() {
    this.http.get(this.url).pipe(
      take(1)
    ).subscribe((data) => {
      this.data$.next(data);
    });
  }
}

It's advisable to centralize your API logic within the service so that the data can be shared across multiple components efficiently when stored in one place.

Resetting a Subject entity

Answer №1

Answer №2

Similar questions

Ways to obtain a data type as an element in an array?

Express server for an Angular 2 application failing to handle API requests

Nodemailer fails to display an error message when the email is not successfully sent

Customizing CSS for tables within a mat-menu in Angular Material

Continuing the process of uploading the file

Error Alert: Cannot access navigator in Angular Universal platform

Passing data between two distinct components when a button is clicked within Angular 4, all while ensuring the route URL remains unchanged

Is there a RxJS equivalent of tap that disregards notification type?

Separate the business logic from the HTML code in Angular to prevent repetition and make the code

Error: Spy creation was anticipated to have been invoked

Angular routing displays a 404 error message indicating that the page cannot be found

The module node_modules/angular-2-local-storage/dist/index.d.ts is encountering a Metadata version mismatch error. The current version found is 4, however, the expected version

Guide on importing a custom CSS file from Syncfusion Theme Studio into an Angular project

What is the rationale behind TypeScript permitting undefined methods?

Why does my Visual Studio Code always display "building" when I launch an extension?

What could be causing the media queries to not take effect at a max-width of 425px?

Unable to retrieve nested objects from HTTP Response

Components in Angular modules that are loaded lazily with identical names

Ensuring that Http requests are carried out upon opening Angular-PWA

Tips for creating a unit test case for a specialized validator in angular reactive forms