关于angular:NgRx-Store-createSelector-的单步调试和源代码分析

源代码：

import {Component} from '@angular/core';
import {createSelector} from '@ngrx/store';
 
export interface State {
  counter1: number;
  counter2: number;
}
 
export const selectCounter1 = (state: State) => state.counter1;
export const selectCounter2 = (state: State) => state.counter2;
export const selectTotal = createSelector(
  selectCounter1,
  selectCounter2,
  (counter1, counter2) => counter1 + counter2
); // selectTotal has a memoized value of null, because it has not yet been invoked.

createSelector 外部：

function createSelector(...input) {return createSelectorFactory(defaultMemoize)(...input);
}

defaultMemoize 返回一个对象，每个字段指向一个函数：

输出参数我传入了三个纯函数，即没有 side effect，能够反复执行的函数。这三个纯函数被保护到了一个数组内：

进入到 createSelectorFactory 返回的函数体外部：

从源代码能够看出，createSelector 接管的可变数目标参数，最初一个被当成 projector 对待，其余均视作 selector.

分下列几种状况探讨：

(1) 第一次执行，lastArguments undefined, 进入该 IF 分支，执行 projection，将后果保留，并返回。
(2) 如果是反复执行，且输出参数没有变动，则间接返回上一次执行的后果
(3) 执行到这里，阐明是反复执行，且参数产生了变动，则从新执行 projection
(4) 如果再次执行和前次执行的后果雷同，返回前次后果

createSelector 最终返回的，是带有记忆性能的 selector：

当前如若要调试，记住代码的大略地位在 970，搜寻关键字 memoized.

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