从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 引用：

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

等价于：const operator = this.operator;

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

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

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

_next存放的就是回调函数：

operator：

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

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

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

这里终于调用store的_subscribe方法了：

在ReplaySubject.js里，手动调用subscriber的next方法：

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

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

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

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

864行，一会再设置断点：

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

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

没有成功，再试试map.js的第29行：

cmsRequired

这里是RouterState的初始状态：

page.effect.ts:

更多Jerry的原创文章，尽在：“汪子熙”:

从ngrx store里selector出来的Observable，执行subscribe的单步调试相关推荐

Angular Ngrx store 里的 Selector 介绍
选择器是纯函数,它将状态切片(State slice)作为输入参数,并返回组件可以使用的状态数据切片(这些切片包含真正的业务数据). 正如数据库有自己的 SQL 查询语言一样,Ngrx/store 模 ...
NgRx Store里的StoreModule.forRoot()
NgRx Store is mainly for managing global state across an entire application. In cases where you need ...
Angular里interpolation text节点的创建逻辑，单步调试
通过一个例子来学习: 新建一个Component,只包含一个名为hero的属性,包含一个name字段,值为Jerry: export class AppComponent implements OnI ...
NgRx Store createSelector 返回的 selector 执行取数逻辑的单步调试
测试源代码: import { Component } from '@angular/core'; import { createSelector } from '@ngrx/store';expor ...
NgRx store.dispatch方法的单步调试
this.store.dispatch方法执行之后,会触发哪些操作呢? _value里维护的store的初始值: store里有三个字段: actionsObserver reducerManager ...
NgRx Store createSelector 的单步调试和源代码分析
源代码: import { Component } from '@angular/core'; import { createSelector } from '@ngrx/store';export ...
关于 @ngrx/Store 下 obj 的扩展问题
为什么80%的码农都做不了架构师?>>> 昨天做 task 的时候,遇到了一个问题. TypeError: can't define property "x" ...
rxjs里的Observable对象subscribe方法的执行原理
看个例子: const myObservable = of(1, 2, 3);// 创建一个观察者对象-Observer(处理next.error.complete回调)const myObserve ...
vue3 实现监听store里state状态变化
vue3 实现监听store里state状态变化 import { watch } from "vue"; watch(() => store.state.currentDe ...

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

从ngrx store里selector出来的Observable，执行subscribe的单步调试相关推荐

最新文章

热门文章