Angular NgRX：如果存储切片为空，则转到数据库

Question

我正在使用 Angular NgRX。我还在学习 NgRX。在下面的代码中。我正在使用选择器从商店中获取状态切片。如果数据未定义或长度等于 0，则调用 dispatch，然后转到 DB 获取数据。

我的问题是：这是正确的方法吗？或者如果存储切片未定义，NgRX Effects 是否应该处理访问 API 的逻辑？

在下面的代码中，如果我不订阅选择器并检查它，那么它每次都会调用 API 端点，这违背了使用状态存储的目的，是吗？

import { Component, OnInit, OnDestroy } from '@angular/core';
import { select, Store } from '@ngrx/store';
import { Observable, Subscription } from 'rxjs';
import { tap } from 'rxjs/operators';
...

@Component({
  selector: 'my-pro',
  templateUrl: './my-pro.component.html',
  styleUrls: ['./my-pro.component.scss'],
})

export class MyProxyComponent implements OnInit, OnDestroy {

  myProxyList$ = this.store.select(getProxyList);
  subs: Subscription;
  searchCriteria = {
    standardId: 'mka',
    start: 1,
    end: 25,
  };

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

  ngOnInit(): void {
    this.getMyProxy();
  }
 
  ngOnDestroy(): void {
    this.subs.unsubscribe();
  }

  getMyProxy(): void {
    this.subs = this.myProxyList$.subscribe(
      data => {
        console.log('myProxyList', data);
        // if length is 0, goto the db
        if (data === undefined || data.length === 0) {
           // ngrx action to call api
           this.store.dispatch(ProxyActions.getAllProxyList({ searchCriteria: this.searchCriteria }));
         }
       }
     );
  }

}

Answer 1

您肯定想在您的效果器中执行此操作。这是很多样板。如果看起来太多，请查看 @ngrx/component-store 或 rxjs 外观。它们具有较少的间接性，并且在您的用例中，尤其是对于一个组件，它们可能更适合。例如，请参阅此处的搜索票示例：https://medium.com/angular-in-depth/angular-you-may-not-need-ngrx-e80546cc56ee

对于 ngrx 解决方案，请在您的商店中添加一个 proxyListLoaded 布尔值以跟踪它是否已加载。

 proxyList$ = createEffect(() =>
    this.actions$.pipe(
      ofType(proxyActions.getAllProxyList),
      withLatestFrom(
        this.store.select(getProxyListLoaded),
      ),
      filter(([_action, loaded]) => !loaded),
      exhaustMap(() => 
        this.proxyService.getProxyList().pipe(
        map(result => new LoadOrders(result))
      ))
  );