NgRx|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 内部:
NgRx|NgRx Store createSelector 的单步调试和源代码分析
文章图片

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

defaultMemoize 返回一个对象,每个字段指向一个函数:
NgRx|NgRx Store createSelector 的单步调试和源代码分析
文章图片

【NgRx|NgRx Store createSelector 的单步调试和源代码分析】NgRx|NgRx Store createSelector 的单步调试和源代码分析
文章图片

输入参数我传入了三个纯函数,即没有 side effect,可以重复执行的函数。这三个纯函数被维护到了一个数组内:
NgRx|NgRx Store createSelector 的单步调试和源代码分析
文章图片

进入到 createSelectorFactory 返回的函数体内部:
NgRx|NgRx Store createSelector 的单步调试和源代码分析
文章图片

从源代码可以看出,createSelector接收的可变数目的参数,最后一个被当成 projector 看待,其余均视作 selector.
NgRx|NgRx Store createSelector 的单步调试和源代码分析
文章图片

分下列几种情况讨论:
(1) 第一次执行,lastArguments undefined, 进入该 IF 分支,执行 projection,将结果保存,并返回。
(2) 如果是重复执行,且输入参数没有变化,则直接返回上一次执行的结果
(3) 执行到这里,说明是重复执行,且参数发生了变化,则重新执行 projection
(4) 如果再次执行和前次执行的结果相同,返回前次结果
NgRx|NgRx Store createSelector 的单步调试和源代码分析
文章图片

createSelector 最终返回的,是带有记忆功能的 selector:
NgRx|NgRx Store createSelector 的单步调试和源代码分析
文章图片

以后如若要调试,记住代码的大概位置在 970,搜索关键字 memoized.
更多Jerry的原创文章,尽在:"汪子熙":
NgRx|NgRx Store createSelector 的单步调试和源代码分析
文章图片

    推荐阅读