基于NgRx实现Guard中顺序加载依赖数据的技术问询

Hey there! Let's break down how to handle this sequential, dependent preloading in your Angular Guard—this is a really common scenario when you've got data that relies on previously loaded data before a component can safely render.

First, let's recap the core problem: you need to dispatch an action to load Object A, wait for it to be available in state, then use data from A to dispatch another action for Object B, and only let the page load once both are done (and no errors occurred).

Step 1: Set Up Your Guard with RxJS Operators #

Since we're dealing with asynchronous actions and state updates, RxJS will be our best friend here. We'll use operators like switchMap, filter, take, and catchError to handle the sequential flow and state checks.

Here's a concrete example of what your Guard might look like:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { Store } from '@ngrx/store';
import { Actions, ofType } from '@ngrx/effects';
import { Observable, of } from 'rxjs';
import { switchMap, filter, take, catchError, map } from 'rxjs/operators';

// Import your action types and state interface
import { AppState } from '../state/app.state';
import { loadObjectA, loadObjectASuccess, loadObjectB, loadObjectBSuccess } from '../actions/things.actions';

@Injectable({ providedIn: 'root' })
export class PreloadGuard implements CanActivate {
  constructor(
    private store: Store<AppState>,
    private actions$: Actions,
    private router: Router
  ) {}

  canActivate(): Observable<boolean> {
    // 1. First, dispatch the action to load Object A
    this.store.dispatch(loadObjectA());

    // 2. Wait for Object A to be successfully loaded
    return this.actions$.pipe(
      ofType(loadObjectASuccess),
      take(1), // Take only the first success action to avoid memory leaks
      switchMap((aSuccessAction) => {
        // 3. Extract the needed data from Object A's success action
        const objectAId = aSuccessAction.payload.id;

        // 4. Dispatch action to load Object B using Object A's data
        this.store.dispatch(loadObjectB({ objectAId }));

        // 5. Wait for Object B to be successfully loaded
        return this.actions$.pipe(
          ofType(loadObjectBSuccess),
          take(1),
          map(() => true), // Both loaded successfully—allow navigation
          catchError(() => {
            // Handle error loading Object B
            this.router.navigate(['/error']);
            return of(false);
          })
        );
      }),
      catchError(() => {
        // Handle error loading Object A
        this.router.navigate(['/error']);
        return of(false);
      })
    );
  }
}

Step 2: Add State Checks (Optional but Recommended) #

To avoid reloading data that's already in state (like if the user navigates back), you can add a check before dispatching each action:

// Inside canActivate()
return this.store.select(state => state.things).pipe(
  take(1),
  switchMap(thingsState => {
    if (thingsState.objectA) {
      // Object A is already loaded—skip to loading Object B
      const objectAId = thingsState.objectA.id;
      this.store.dispatch(loadObjectB({ objectAId }));
      return this.actions$.pipe(
        ofType(loadObjectBSuccess),
        take(1),
        map(() => true),
        catchError(() => {
          this.router.navigate(['/error']);
          return of(false);
        })
      );
    } else {
      // Proceed with loading Object A first
      this.store.dispatch(loadObjectA());
      return this.actions$.pipe(
        ofType(loadObjectASuccess),
        take(1),
        switchMap(aSuccess => {
          this.store.dispatch(loadObjectB({ objectAId: aSuccess.payload.id }));
          return this.actions$.pipe(
            ofType(loadObjectBSuccess),
            take(1),
            map(() => true)
          );
        }),
        catchError(() => {
          this.router.navigate(['/error']);
          return of(false);
        })
      );
    }
  })
);

Key Tips to Remember #

• take(1): Critical to prevent memory leaks—this operator automatically unsubscribes after capturing the first success action.
• switchMap: Ideal for sequential async work—it cancels the previous observable stream once a new one starts, ensuring we don't overlap requests.
• Error Handling: Always include catchError to handle failed loads and redirect users instead of leaving them in a stuck state.
• State Checks: Adding checks for existing data cuts down on unnecessary API calls and improves overall performance.

Alternative: Pull Object A Data Directly from State #

If you prefer to access Object A's data directly from the store instead of the success action, use withLatestFrom:

return this.actions$.pipe(
  ofType(loadObjectASuccess),
  take(1),
  withLatestFrom(this.store.select(state => state.things.objectA)),
  switchMap(([_, objectA]) => {
    this.store.dispatch(loadObjectB({ objectAId: objectA.id }));
    return this.actions$.pipe(
      ofType(loadObjectBSuccess),
      take(1),
      map(() => true)
    );
  })
);

This works just as well—pick whichever approach feels more readable for your codebase.

内容的提问来源于stack exchange，提问作者Mike