NgRx|NgRx Store createSelector 返回的 selector 执行取数逻辑的单步调试
测试源代码：
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 里定义的加法运算：
文章图片
【NgRx|NgRx Store createSelector 返回的 selector 执行取数逻辑的单步调试】这里还看不到我们应用程序里传入 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的原创文章，尽在："汪子熙":
文章图片
推荐阅读
- unity|unity 在iOS平台跳转appstore
- iOS|iOS 高效开发必备技巧之自动化打包(shell xcode11 上传App Store 蒲公英等平台)
- App|App Store connect Operation Error
- 【2022/01/27】MediaStore模糊查询、分页、排序
- 使用 Jetpack DataStore 进行数据存储
- AppStore审核问题
- 二分|CodeForces_1355E Restorer Distance(三分)
- IOS-AppStore上架审核各个屏幕截图尺寸
- leetcode做题笔记|leetcode:Restore IP Addresses
- ExtJS|Ext.Data.Store中将两个字段合并为一个字段