头图

NgRx Store createSelector 的单步调试和源代码分析

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.

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的原创文章,尽在:"汪子熙":

阅读 345

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

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

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

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

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