源代碼：

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 內部：

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

defaultMemoize 返回一個對象，每個字段指向一個函數：

輸入參數我傳入了三個純函數，即沒有 side effect，可以重復執(zhí)行的函數。這三個純函數被維護到了一個數組內：

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

從源代碼可以看出，createSelector接收的可變數目的參數，最后一個被當成 projector 看待，其余均視作 selector.

分下列幾種情況討論：

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

createSelector 最終返回的，是帶有記憶功能的 selector：

以后如若要調試，記住代碼的大概位置在 970，搜索關鍵字 memoized.

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的NgRx Store createSelector 的单步调试和源代码分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。