@ngrx/store pre-load guard catch error

Question

I'm working on the Angular guard with @ngrx/store to check if state has been already loaded and I faced an issue that canActivate method never returns if I use filter.

Here is an example effect for GetCompanies action:

return this.companiesService.getCompanies()
  .pipe(
    map(companies => new companiesActions.GetCompaniesSuccess(companies)),
    catchError(error => Observable.of(new companiesActions.GetCompaniesFail(error)))
  )

If there is an error I'm dispatching a GetCompaniesFail action and redirect a user to /login page. That's fine, the interesting part is with the guard.

@Injectable()
export class CompaniesGuard implements CanActivate {
  constructor(
    private store: Store<AppState>,
    private router: Router
  ) {}

  canActivate(): Observable<boolean> {
    return this.checkStore()
      .pipe(
        switchMap(() => Observable.of(true)),
        catchError(() => Observable.of(false))
      );
  }

  checkStore(): Observable<boolean> {
    return this.store.select(getCompaniesLoaded)
      .pipe(
        tap(loaded => {
          if (!loaded) {
            this.store.dispatch(new companiesActions.GetCompanies());
          }
        }),
        filter(loaded => loaded),
        take(1)
      );
  }
}

If there is an error and loaded is not false, canActivate wouldn't return anything because checkStore does nothing.

If I change filter to map it works but it takes only the first value which is false even if the data will be loaded successfully.

What am I missing? How can I handle HTTP errors there? Is there a way to either wait for certain state or throw an error inside checkStore?

Thank in advance!

I'm not sure you should make http calls in guards. This means that on every page change, you will make an http request. Not only this is useless requests, but in case of a user that pays for its internet, you will make him pay for unecessary requests. Are you sure you want to do that ? What exactly is the condition your guard is testing ? — user4676340
@trichetriche I think that his plan is to make the call, put the data in cache (ngrx), and reference that from then on. The problem is that it isn't in cache on first page load. At least that was my issue. — bygrace
I had the same situation and I solved it by setting up my effect to retry on error. What is your desired result on an error? Do you want canActivate to emit false? — bygrace

Richard Matsen Richard Matsen · Accepted Answer · 2018-02-12T22:16:54

This seems easier to handle if you separate the responsibilities a little.

You should run checkStore regardless, and not depend on it's result directly. Instead, let the store inform you of success or failure and return that result.

Note that ngrx and redux encourages one-way-data-flow to simplify app logic.

The store property getCompaniesLoadedStatus in initialized to initial, and set to success or failed within companiesActions.GetCompaniesSuccess or companiesActions.GetCompaniesFail.

Retries are handled in the service (closer to the fetch).

canActivate(): Observable<boolean> {
  this.checkStore();
  return this.store.select(getCompaniesLoadedStatus).pipe(
    filter(status => status !== 'initial'),
    map(status => status === 'success' ? true : false )
  );
}

checkStore(): void {
  this.store.select(getCompaniesLoadedStatus).pipe(
    take(1)  // so that unsubscribe is not needed
  ).subscribe(status =>
    if (status === 'initial') { 
      this.store.dispatch(new companiesActions.GetCompanies());
    }
  );
}

@ngrx/store pre-load guard catch error

1 Answers