测试源代码：

```typescript
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 函数：

![](https://img-blog.csdnimg.cn/img_convert/9321c46f2fc1b8cd6884527108e2a9aa.png)

![](https://img-blog.csdnimg.cn/img_convert/22519d21fa8074ab8615131b80a27985.png)

因为是第一次调用，lastArguments 为 undefined，因此执行 projectionFn：

![](https://img-blog.csdnimg.cn/img_convert/db10f21edafddd961abaee3c283bfa29.png)

还不会马上调用到我们在 projection 里定义的加法运算：
![](https://img-blog.csdnimg.cn/img_convert/6d3a6417c778834208ffe181aa0c76f4.png)

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

![](https://img-blog.csdnimg.cn/img_convert/0ba64ed617bec8efe5b7cb0a26f085c7.png)

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

![](https://img-blog.csdnimg.cn/img_convert/59eba39172030d76ea85ccab4b185256.png)

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

![](https://img-blog.csdnimg.cn/img_convert/0d4db0abaa3c026adbba03e17d9ab10f.png)

此处 fn 即 selectors 数组第一个元素：
![](https://img-blog.csdnimg.cn/img_convert/ebfb7383b1fe573ce641169c880d1eb4.png)

得到3：
![](https://img-blog.csdnimg.cn/img_convert/214b10f856c718bb86ac7b29a90cf4df.png)

依次类推，第二个参数4：
![](https://img-blog.csdnimg.cn/img_convert/e733f9b1ba4298e82389790094d5e270.png)

3和4即为最终调用带有记忆功能的 projectionFn 的输入参数：
![](https://img-blog.csdnimg.cn/img_convert/dd5c2f787066b75d86832ae9d0f49fa6.png)

这就是我们已经熟知的 memoized 函数体了。可以参考 Jerry 之前的文章：[NgRx Store createSelector 的单步调试和源代码分析](https://jerry.blog.csdn.net/article/details/120327721)。

![](https://img-blog.csdnimg.cn/img_convert/4e286cdbc66006784ba8f7f7a6953058.png)

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

![](https://img-blog.csdnimg.cn/img_convert/3ce34e8c93e0a1f38b3657cafe098717.png)

执行求和运算：
![](https://img-blog.csdnimg.cn/img_convert/b276e1e7362a1aa4a2335269e3203514.png)

将调用的输入参数3和4缓存起来。一并缓存的还有计算结果7：
![](https://img-blog.csdnimg.cn/img_convert/721878b0d35e5b59c5987ed0855068b1.png)

第二次执行时，因为输入参数未变，仍然是3和4，故直接从缓存结果里取出7，返回之。
![](https://img-blog.csdnimg.cn/img_convert/33e012693e7b691c94ca76d42a394250.png)

ITPub博客

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

最新文章