Angular中如何用路由解析器处理NgRx Effects的HTTP请求？解决状态丢失

你的核心问题是刷新MovieComponent页面时全局电影状态丢失，根源在于当前仅在AppComponent初始化时触发数据加载，而刷新详情页时虽然AppComponent会重新初始化，但数据加载的异步过程可能赶不上MovieComponent的渲染，或者状态初始化逻辑存在漏洞。下面直接给出针对性方案和最佳实践判断：

一、是否要迁移到路由解析器？不是最佳选择 #

不建议把「全局电影列表初始化」逻辑完全迁移到MovieComponent的路由解析器。原因很简单：路由解析器是为单个路由的前置依赖设计的，而电影列表属于全局共享状态（AppComponent也要用），如果只在详情页加载，会导致：

1. 从首页跳转到详情页时，重复触发加载请求（浪费资源）；
2. 回到首页时，还得再次加载列表，体验割裂。

当然，如果你的场景是只有详情页需要电影数据，首页不需要，那路由解析器可以用，但显然不符合你的现状。

二、推荐的优化方案 #

方案1：全局预加载（最佳实践） #

把电影列表的加载逻辑移到应用启动阶段，确保无论刷新哪个页面，数据都会先加载完成。用Angular的APP_INITIALIZER实现：

步骤1：重构Action与Effect

先简化你的Action和Effect逻辑（当前的SetMovies带payload的设计有点绕）：

// movies.actions.ts
import { Action } from '@ngrx/store';
export interface Movie { /* 你的电影类型定义 */ }

export const enum MoviesActionTypes {
  LoadMovies = '[Movies] Load Movies',
  LoadMoviesSuccess = '[Movies] Load Movies Success',
  LoadMoviesFail = '[Movies] Load Movies Fail'
}

export class LoadMovies implements Action {
  readonly type = MoviesActionTypes.LoadMovies;
}

export class LoadMoviesSuccess implements Action {
  readonly type = MoviesActionTypes.LoadMoviesSuccess;
  constructor(public payload: Movie[]) {}
}

export class LoadMoviesFail implements Action {
  readonly type = MoviesActionTypes.LoadMoviesFail;
  constructor(public payload: any) {}
}

export type MoviesActions = LoadMovies | LoadMoviesSuccess | LoadMoviesFail;

// movies.effects.ts
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { Store } from '@ngrx/store';
import { EMPTY, of } from 'rxjs';
import { switchMap, map, catchError, withLatestFrom } from 'rxjs/operators';
import { MoviesActionTypes, LoadMoviesSuccess, LoadMoviesFail } from './movies.actions';
import { MoviesSelectors } from './movies.selectors';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class MoviesEffects {
  loadMovies$ = createEffect(() =>
    this.actions$.pipe(
      ofType(MoviesActionTypes.LoadMovies),
      withLatestFrom(this.store.select(MoviesSelectors.getHasMovies)),
      switchMap(([_, hasMovies]) => {
        // 已有数据则直接跳过请求
        if (hasMovies) return EMPTY;
        return this.http.get('https://www.fakerestapi.com/datasets/api/v1/movie-details-dataset.json').pipe(
          map(res => new LoadMoviesSuccess(res['data'])),
          catchError(err => of(new LoadMoviesFail(err)))
        );
      })
    )
  );

  constructor(
    private actions$: Actions,
    private store: Store,
    private http: HttpClient
  ) {}
}

步骤2：配置APP_INITIALIZER

在app.module.ts中注册启动初始化逻辑，确保应用一启动就触发数据加载：

// app.module.ts
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { Store } from '@ngrx/store';
import { LoadMovies } from './store/movies.actions';

// 初始化函数：触发加载电影的action
export function initMovies(store: Store) {
  return () => store.dispatch(new LoadMovies());
}

@NgModule({
  // ... 其他模块、组件配置
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initMovies,
      deps: [Store],
      multi: true
    }
  ]
})
export class AppModule {}

这样无论刷新哪个页面，应用启动时都会先检查状态是否有数据，没有就发起请求，确保全局状态始终可用。

方案2：路由解析器（仅适用于特定场景） #

如果你的电影数据量极大，预加载会拖慢启动速度，或者只有详情页需要数据，可以用路由解析器在进入详情页前确保数据加载完成：

步骤1：创建解析器

// movies.resolver.ts
import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { Store } from '@ngrx/store';
import { Observable, of } from 'rxjs';
import { filter, take, switchMap, catchError } from 'rxjs/operators';
import { MoviesSelectors } from './store/movies.selectors';
import { LoadMovies } from './store/movies.actions';

@Injectable()
export class MoviesResolver implements Resolve<boolean> {
  constructor(private store: Store) {}

  resolve(): Observable<boolean> {
    return this.store.select(MoviesSelectors.getHasMovies).pipe(
      switchMap(hasMovies => {
        if (hasMovies) return of(true);
        // 没有数据则触发加载，等待加载完成
        this.store.dispatch(new LoadMovies());
        return this.store.select(MoviesSelectors.getHasMovies).pipe(
          filter(loaded => loaded),
          take(1),
          map(() => true)
        );
      }),
      catchError(() => of(false))
    );
  }
}

步骤2：配置路由

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { MovieComponent } from './movie/movie.component';
import { MoviesResolver } from './movies.resolver';

const routes: Routes = [
  { path: '', component: AppComponent },
  {
    path: 'movie/:id',
    component: MovieComponent,
    resolve: {
      moviesLoaded: MoviesResolver
    }
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [MoviesResolver]
})
export class AppRoutingModule {}

方案3：按需加载单个电影（更高效的细节页方案） #

如果你的电影列表数据量很大，细节页不需要整个列表，可以单独加载单个电影数据，避免请求冗余：

1. 添加LoadMovie和LoadMovieSuccess action；
2. 编写对应的Effect，根据路由参数的电影ID请求单个详情；
3. 在MovieComponent的ngOnInit中，从路由参数获取ID并触发LoadMovie action。

这种方式更适合数据量较大的场景，减少不必要的带宽消耗。

三、总结 #

• 优先选全局预加载：如果电影列表是应用核心数据，多个组件依赖，APP_INITIALIZER是最合理的方案，确保状态全局可用；
• 路由解析器仅作补充：适合数据量极大、预加载影响启动速度的场景；
• 按需加载单个电影：细节页的最优解，避免加载冗余数据。

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