原始碼：

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

createSelector 內部：

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

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

defaultMemoize 返回一個物件，每個欄位指向一個函式：

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

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

輸入引數我傳入了三個純函式，即沒有 side effect，可以重複執行的函式。這三個純函式被維護到了一個陣列內：

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

進入到 createSelectorFactory 返回的函式體內部：

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

從原始碼可以看出，createSelector接收的可變數目的引數，最後一個被當成 projector 看待，其餘均視作 selector.

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

分下列幾種情況討論：

(1) 第一次執行，lastArguments undefined, 進入該 IF 分支，執行 projection，將結果儲存，並返回。
(2) 如果是重複執行，且輸入引數沒有變化，則直接返回上一次執行的結果
(3) 執行到這裡，說明是重複執行，且引數發生了變化，則重新執行 projection
(4) 如果再次執行和前次執行的結果相同，返回前次結果

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

createSelector 最終返回的，是帶有記憶功能的 selector：
![](https://img-blog.csdnimg.cn/img_convert/644a5a5c462baa3e7d6eebdda782b518.png)

以後如若要除錯，記住程式碼的大概位置在 970，搜尋關鍵字 memoized.

NgRx Store createSelector 的單步除錯和原始碼分析

相關文章