从ngrx store里selector出来的Observable,执行subscribe的单步调试

源代码:

  getNextPageContext(): Observable<PageContext> {
    const a = this.store.pipe(select(RoutingSelector.getNextPageContext));
    console.log('Jerry next page context: ' + a);
    a.subscribe((b) =>{
      console.log(b);
    });
    return a;
  }

单步调试:

a是调用类似ABAP open SQL从ngrx store里select出来的一个store 引用:

从ngrx store里selector出来的Observable,执行subscribe的单步调试

把store对象的operator字段取出来,存放到变量operator里。

等价于:const operator = this.operator;

从ngrx store里selector出来的Observable,执行subscribe的单步调试

上图第21行的变量ObserverOrNext, 即我们指定到subscribe调用里的回调函数。

从ngrx store里selector出来的Observable,执行subscribe的单步调试

在toSubscriber.js文件里,把我们传入到subscribe里的回调函数,封装成一个Subscriber实例。

Subscriber的destination字段,存储的是SafeSubscriber实例,指向我们指定的回调函数。

从ngrx store里selector出来的Observable,执行subscribe的单步调试

_next存放的就是回调函数:

从ngrx store里selector出来的Observable,执行subscribe的单步调试

operator:

从ngrx store里selector出来的Observable,执行subscribe的单步调试

this和this.source的类型都是Store.

下面这行代码相当于告诉this.store, 让其通知subscriber了:

从ngrx store里selector出来的Observable,执行subscribe的单步调试

DistinctUntilChangedSubscriber这个subscriber,就是普通的subscriber基础上,包裹一层DistinctUntilChanged:
现在又要为DistinctUntilChangedSubscriber创建一个subscriber了:

从ngrx store里selector出来的Observable,执行subscribe的单步调试

这里终于调用store的_subscribe方法了:
从ngrx store里selector出来的Observable,执行subscribe的单步调试

在ReplaySubject.js里,手动调用subscriber的next方法:

从ngrx store里selector出来的Observable,执行subscribe的单步调试

而next的输入参数,这个_events数组里有全局的action数据:

从ngrx store里selector出来的Observable,执行subscribe的单步调试

@ngrx/store/update-reducers里能看到所有的features:

从ngrx store里selector出来的Observable,执行subscribe的单步调试

这里能看出,输入是上面介绍的一大串复杂的state和action结构,输出就是homepage和content page的Pagecontext了。

从ngrx store里selector出来的Observable,执行subscribe的单步调试

而上图29行的this.project, 应该是我们应用程序传入的一个函数。

从ngrx store里selector出来的Observable,执行subscribe的单步调试

864行,一会再设置断点:

从ngrx store里selector出来的Observable,执行subscribe的单步调试

执行到53行时,再切换到ngrx-store.js里,设置断点:

从ngrx store里selector出来的Observable,执行subscribe的单步调试

注意断点的位置需设置准确:

从ngrx store里selector出来的Observable,执行subscribe的单步调试

没有成功,再试试map.js的第29行:

从ngrx store里selector出来的Observable,执行subscribe的单步调试

从ngrx store里selector出来的Observable,执行subscribe的单步调试

从ngrx store里selector出来的Observable,执行subscribe的单步调试

从ngrx store里selector出来的Observable,执行subscribe的单步调试

cmsRequired

从ngrx store里selector出来的Observable,执行subscribe的单步调试

这里是RouterState的初始状态:

从ngrx store里selector出来的Observable,执行subscribe的单步调试

page.effect.ts:

从ngrx store里selector出来的Observable,执行subscribe的单步调试

更多Jerry的原创文章,尽在:“汪子熙”:
从ngrx store里selector出来的Observable,执行subscribe的单步调试

上一篇:2021-2027中国L-茶氨酸市场现状研究分析与发展前景预测报告


下一篇:Hystrix工作流程原理