NGRX和Angular Resolver结合的方法

阅读更多

在Resolver里面获取数据，一般可以像下面这样写

 

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable {

  return this.store.pipe(
    select(selectXXX),
    tap((data) => {
      if (!data) {    // 自行根据实际做判断
        // Dispatch action to load data.
        this.store.dispatch(new GetDataAction());
      }
    }),
    filter((data) => {
      return !!data;    // 自行根据实际做判断
    }),
    first()
  );
}

 

这样写，在resolver执行时，先调用selector，然后在tap里面去做判断，没数据就去触发effect请求数据，然后filter执行，因为没有数据，所以返回false，first方法得不到数据，因此resolver返回的Observable就不会被完成，下一个component不会被加载。这里filter的返回值很重要，如果是true，那么first就会使Observable完成，直接加载下一个component。

 

当数据请求完毕，用reducer存入store时，只有数据确实发生了变化，resolver这里的pipe中的方法才会再次执行。tap就可以获取数据，不再调用effect请求数据，并且filter返回true，first可以取得数据（数据的值不重要），然后返回数据中的第一个，使resolver的Observable完成，加载下一个component。

 

这里需要注意的地方是，当effect调用service请求数据失败，要如何做异常处理，防止store中的数据被修改，让tap再次调用effect请求数据。处理不当，会导致UI不停发送给请求，知道取到数据为止。