头图

NgRx Store createSelector 返回的 selector 执行取数逻辑的单步调试

JerryWang_汪子熙
English

测试源代码:

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.
 
let state = { counter1: 3, counter2: 4 };
 
@Component({
  selector: 'selector',
  template: ''
})
export class SelectorComponent{
    constructor(){
        console.log(selectTotal(state)); // computes the sum of 3 & 4, returning 7. selectTotal now has a memoized value of 7
        console.log(selectTotal(state)); // does not compute the sum of 3 & 4. selectTotal instead returns the memoized value of 7
    }
}

首先执行构造函数里第一条 selector 调用。

selectTotal 的函数体就是 createSelector 返回的 memoized 函数:

因为是第一次调用,lastArguments 为 undefined,因此执行 projectionFn:

还不会马上调用到我们在 projection 里定义的加法运算:

这里还看不到我们应用程序里传入 createSelector 时指定的 projectionFn 函数。

selectors 是数组,里面存放了应用开发人员传入的纯函数:

调用数组自带的 map 方法,首先把 projection 计算所需的输入参数计算出来:

此处 fn 即 selectors 数组第一个元素:

得到3:

依次类推,第二个参数4:

3和4即为最终调用带有记忆功能的 projectionFn 的输入参数:

这就是我们已经熟知的 memoized 函数体了。可以参考 Jerry 之前的文章:NgRx Store createSelector 的单步调试和源代码分析

projector 就是之前 createSelector 传入的纯函数的最后一个,即执行加法运算的 函数:

执行求和运算:

将调用的输入参数3和4缓存起来。一并缓存的还有计算结果7:

第二次执行时,因为输入参数未变,仍然是3和4,故直接从缓存结果里取出7,返回之。

更多Jerry的原创文章,尽在:"汪子熙":

阅读 242

Jerry Wang的SAP技术专栏
SAP成都研究院开发专家,SAP社区导师,SAP中国技术大使

Jerry 2007年从电子科技大学计算机专业硕士毕业后进入SAP成都研究院工作至今, SAP社区导师,SAP中国技术...

755 声望
1k 粉丝
0 条评论
你知道吗?

Jerry 2007年从电子科技大学计算机专业硕士毕业后进入SAP成都研究院工作至今, SAP社区导师,SAP中国技术...

755 声望
1k 粉丝
文章目录
宣传栏