Angular 5+NgRX中实现组件仅触发一次后端请求的方案咨询

嘿，我来帮你搞定这个只触发一次后端请求的问题！结合Angular 5和NgRX的场景，这里有几个靠谱的解决方案，你可以根据自己的项目情况选择：

方案一：在组件内判断状态后再触发请求 #

最简单的方式就是在组件初始化时，先检查Store里是否已经有设置数据，只有当数据不存在时才dispatch请求。这样每次组件加载时都会先判断状态，避免重复发请求：

class SettingsComponent implements OnInit { 
  settings$ = this.store.select(fromSettings.getSettings); 

  constructor(private store: Store<fromSettings.State>) { } 

  ngOnInit() { 
    // 只订阅一次状态，判断是否已有数据
    this.settings$.pipe(take(1)).subscribe(settings => {
      // 这里根据你的状态结构判断，比如settings为null/undefined/空对象时表示未加载
      if (!settings) {
        this.store.dispatch(new LoadSettings());
      }
    });
  }
}

注意：用take(1)是为了只获取一次当前状态，避免不必要的持续订阅，防止内存泄漏。

方案二：用NgRX Effects控制请求触发（更推荐） #

把请求逻辑放到Effects里是NgRX的最佳实践之一，我们可以在Effects里添加判断逻辑，只有当Store中没有设置数据时，才真正发起后端请求。这样即使组件多次dispatch LoadSettings action，也不会重复调用接口：

@Injectable()
export class SettingsEffects {
  loadSettings$ = createEffect(() => 
    this.actions$.pipe(
      ofType(LoadSettings), // 监听LoadSettings action
      // 获取当前Store中的设置数据
      withLatestFrom(this.store.select(fromSettings.getSettings)),
      // 过滤掉已有数据的情况，只在无数据时继续执行
      filter(([action, settings]) => !settings),
      // 发起后端请求并处理结果
      switchMap(() => 
        this.settingsService.getSettings().pipe(
          map(settings => new LoadSettingsSuccess(settings)),
          catchError(error => of(new LoadSettingsFailure(error)))
        )
      )
    )
  );

  constructor(
    private actions$: Actions,
    private store: Store<fromSettings.State>,
    private settingsService: SettingsService
  ) {}
}

这个方案的好处是把请求控制逻辑从组件中剥离，组件只需要负责dispatch action，而什么时候真正发请求由Effects来决定，代码更清晰，也符合NgRX的架构思想。

方案三：用路由Resolver预加载数据（适合路由场景） #

如果你的SettingsComponent是通过路由访问的，可以用Angular的Route Resolver来在路由激活前就确保数据已加载，而且同样可以添加判断逻辑避免重复请求：

首先创建Resolver：

@Injectable({ providedIn: 'root' })
export class SettingsResolver implements Resolve<Settings> {
  constructor(
    private store: Store<fromSettings.State>,
    private settingsService: SettingsService
  ) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Settings> {
    return this.store.select(fromSettings.getSettings).pipe(
      take(1),
      switchMap(settings => {
        // 如果已有数据，直接返回
        if (settings) {
          return of(settings);
        }
        // 没有数据则发起请求，并把结果同步到Store
        return this.settingsService.getSettings().pipe(
          tap(settings => this.store.dispatch(new LoadSettingsSuccess(settings)))
        );
      })
    );
  }
}

然后在路由配置中添加Resolver：

const routes: Routes = [
  {
    path: 'settings',
    component: SettingsComponent,
    resolve: { settings: SettingsResolver }
  }
];

这样用户访问settings路由时，Resolver会先检查Store中的数据，没有的话就发起请求，等数据加载完成后才会激活组件。组件里甚至不需要再写dispatch逻辑，直接从Store或者路由快照中获取数据即可。

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