35

In ngOnInit, my component obtains a list of users like so:

this.userService.getUsers().subscribe(users => {
    this.users = users;
});

And the implementation of userService.getUsers() looks like this:

getUsers() : Observable<UserModel[]> {
    return this.http.get('http://localhost:3000/api/user')
                    .map((res: Response) => <UserModel[]>res.json().result)
                    .catch((error: any) => Observable.throw(error.json().error || 'Internal error occurred'));
}

Now, in another component, I have a form that can create a new user. The problem is that when I use that second component to create a user, the first component doesn't know that it should make a new GET request to the backend to refresh its view of users. How can I tell it to do so?

I know that ideally I'd want to skip that extra HTTP GET request, and simply append the data the client already has from when it made the POST to insert the data, but I'm wondering how it'd be done in the case where that's not possible for whatever reason.

2 Answers 2

20

In order for an observable to be able to provide values after initial Http observable was completed, it can be provided by RxJS subject. Since caching behaviour is desirable, ReplaySubject fits the case.

It should be something like

class UserService {
  private usersSubject: Subject;
  private usersRequest: Observable;
  private usersSubscription: Subscription;

  constructor(private http: Http) {
    this.usersSubject = new ReplaySubject(1);
  }

  getUsers(refresh: boolean = false) {
    if (refresh || !this.usersRequest) {
      this.usersRequest = this.http.get(...).map(res => res.json().result);

      this.usersRequest.subscribe(
        result => this.usersSubject.next(result),
        err => this.usersSubject.error(err)
      );
    }

    return this.usersSubject.asObservable();
  }
  onDestroy() {
    this.usersSubscription.unsubscribe();
  }
}

Since the subject already exists, a new user can be pushed without updating the list from server:

this.getUsers().take(1).subscribe(users => 
  this.usersSubject.next([...users, newUser])
)
13
  • Lots of great answers here. I went with the approach you suggested, and it's working great. Oct 26, 2016 at 19:22
  • how to unsubscribe using this method ? Nov 22, 2017 at 19:04
  • 1
    The same way as it would be done with any other observable; use this.usersSubject.unsubscribe() or save a subscription from observable and call unsubscribe on it in service ngOnDestroy. Since Http results in completed observables, there may be no need to unsubscribe, though it would be better to do that. Nov 22, 2017 at 19:28
  • by tring the solution i got this error Generic type 'Subject<T>' requires 1 type argument(s). Dec 25, 2018 at 23:33
  • 1
    @xaunlopez I'd not say it's a bad practice, but it's a good practice to unsubscribe. See my comment above on subscriptions. The code you suggested looks fine but from my understanding of how you suggest it to use, the intention differs. Since an observable can be resubscribed by consumers, the service will do unnecessary requests again, while still returning cached data via usersSubject. If you have ideas how it can cache without making requests when no refresh is provided, consider posting an answer with derived code. Jan 31, 2019 at 0:56
3

The way I've handled this problem so far has been to use an intermediary. this.userService.getUsers() returns an Rx.BehviorSubject which is initialized on the return of the http observable.

Something close to this:

getUsers() : BehaviorSubject<UserModel[]> {
  return this.behaviorSubject;
}
updateUsers() {
    this.http.get('http://localhost:3000/api/user')
                    .map((res: Response) => <UserModel[]>res.json().result)
                    .catch((error: any) => Observable.throw(error.json().error || 'Internal error occurred'))
                    .subscribe((value) => {
                      this.behaviorSubject.next(value)});
}
3
  • 1
    This is technically the simplest possible 'redux' store :-) Same concept. Nov 30, 2018 at 19:49
  • This is a bit out of scope for this question perhaps, but ... Does a behaviorSubject work with an async pipe ?
    – bvdb
    May 21, 2019 at 15:17
  • @bvdb woah, a dead comment resurrection. Behavior Subject should work with an async pipe. Been quite a while since I've worked in Angular but based on this comment chain on an issue with Rx Subject, behavior subjects work fine with async pipe. github.com/angular/angular/issues/12129
    – Joshua
    May 25, 2019 at 23:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.