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

Question

你能告诉我如何只在第一次从服务器获取数据并显示到屏幕上吗？但是如果用户再次来或者组件再次加载它从商店获取数据。我正在使用 redux 和 ngrx 。

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

这是我的代码

（不要在 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)))
    )
  })
);

这意味着，你的影响只会取的时候它尚未加载的数据，这是由指示loaded你的财产ProductState。

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