The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Time:2021-10-16

Test source code:

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
    }
}

First, execute the first selector call in the constructor.

The function body of selecttotal is the memoized function returned by createselector:

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Since this is the first call and lastarguments is undefined, execute projectionfn:

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

The addition operation defined in the projection will not be called immediately:
The selector returned by ngrx store createselector performs one-step debugging of fetching logic

We can’t see the projectionfn function specified when we pass in createselector in our application.

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Selectors are arrays containing pure functions passed in by application developers:

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Call the map method of the array. First, calculate the input parameters required for the projection calculation:

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Here FN is the first element of the selectors array:
The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Get 3:
The selector returned by ngrx store createselector performs one-step debugging of fetching logic

And so on, the second parameter 4:
The selector returned by ngrx store createselector performs one-step debugging of fetching logic

3 and 4 are the input parameters for the final call of projectionfn with memory function:
The selector returned by ngrx store createselector performs one-step debugging of fetching logic

This is the body of the memoized function we are already familiar with. You can refer to Jerry’s previous articles:Single step debugging and source code analysis of ngrx store createselector

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

The projector is the last pure function passed in by createselector, that is, the function that performs addition operation:

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Perform summation:
The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Cache the input parameters 3 and 4 of the call. The calculation result 7 is also cached:
The selector returned by ngrx store createselector performs one-step debugging of fetching logic

In the second execution, because the input parameters remain unchanged, they are still 3 and 4, so 7 is directly taken from the cache result and returned.
The selector returned by ngrx store createselector performs one-step debugging of fetching logic

More Jerry’s original articles are: “Wang Zixi”:
The selector returned by ngrx store createselector performs one-step debugging of fetching logic