測試原始碼：

```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)

NgRx Store createSelector 返回的 selector 執行取數邏輯的單步除錯

相關文章