如何仅以角度第一次从服务器获取数据？

Question

您能告诉我如何仅在第一次从服务器获取数据并显示到屏幕上吗？但是如果用户再次访问或组件再次加载，它会从存储中获取数据。我正在使用带有 ngrx 的 redux。

我制作了一个示例应用程序，其中有两个按钮 home screen 和new screen 主屏幕我显示来自server 的列表。当我单击new screen 按钮并再次返回主屏幕时，它会服务器并获取数据。我不想再次点击。我想要从store 获取数据。我将如何获取它

这是我的code

（不要在 chrome stackblitz 中打开此链接在 chrome 中有问题）

export class ListComponent implements OnInit {

 products$: Observable<Product[]>;
  constructor(private productService: ProductService,
              private store: Store<fromApp.ProductState>,
              private router : Router
              ) {}

 ngOnInit() {
    this.store.dispatch(new productActions.Load());
    this.products$ = this.store.pipe(select(fromProduct.getProducts))
  }
}

Answer 1

在您的情况下，我的商店中可能会有一个属性，指示数据是否已经加载，例如loaded。当您第一次分派在您的 Effect 中获取数据的操作时，当数据返回时，您还将将此 loaded 属性设置为 true。默认值为false。在你的 Effect 中，你可以使用 withLatestFrom 并选择 loaded 属性。如果设置为true，则什么都不做，如果设置为false，则去获取数据。

首先，更改您的ProductState 并引入loaded 属性：

export interface ProductState {
  toggleCheckBox: boolean,
  products: Product[],
  loaded: boolean;
  error: string
}

const initialState: ProductState = {
  toggleCheckBox: true,
  products: [],
  loaded: false,
  error: ''
};

在您的减速器中，在LoadSuccess 上，将loaded 属性设置为true：

case ProductActionTypes.LoadSuccess:
  return {
    ...state,
    products: [...action.payload],
    loaded: true,
    error: ''
  }

现在，在您的 Effect 中，检查 loaded 属性，然后根据其值获取数据：

@Effect()
loadProduct$: Observable<Action> = this.action$.pipe(
  ofType(productAction.ProductActionTypes.Load),
  withLatestFrom(this.store.pipe(select(fromProduct.getLoaded))),
  switchMap(([, loaded]) => {
    if (loaded) {
      return empty();
    }

    return this.productService.getProducts().pipe(
      map((products) => {
        return new productAction.LoadSuccess(products)
      }),
      catchError(err => of(new productAction.LoadFail(err)))
    )
  })
);

这意味着，您的 Effect 只会在数据尚未加载时获取数据，这由您的 ProductState 上的 loaded 属性指示。

查看此StackBlitz 以了解它的实际效果。打开开发控制台的 Network 选项卡以验证请求仅被触发一次，然后由于 loaded 属性而被“缓存”。