在計算機程式設計領域中，memoization 或 memoisation 是一種最佳化技術，主要用於透過儲存昂貴的函式呼叫的結果並在再次出現相同的輸入時返回快取的結果來加速計算機程式。

Memoization 也已用於其他上下文（以及速度增益以外的目的），例如在簡單的相互遞迴下降解析中。儘管與快取有關，但記憶化是指此最佳化的特定情況，將其與快取或頁面替換等快取形式區分開來。在某些邏輯程式語言的上下文中，記憶化也稱為 Tabling.

記憶功能“記住”與某些特定輸入集相對應的結果。使用記住輸入的後續呼叫返回記住的結果而不是重新計算它，從而消除了使用給定引數呼叫的主要成本，除了第一次使用這些引數呼叫函式。記住的關聯集可以是由替換演算法控制的固定大小的集，也可以是固定集，這取決於函式的性質及其用途。一個函式只有在引用透明的情況下才能被記憶；也就是說，僅當呼叫該函式與用其返回值替換該函式呼叫具有完全相同的效果時。 （然而，存在此限制的特殊情況例外。）雖然與查詢表相關，但由於記憶在其實現中經常使用此類表，因此記憶會根據需要即時而不是提前填充其結果快取。

記憶化是一種以犧牲空間成本的方法來降低函式時間成本的最佳化方式；也就是說，記憶化的函式會針對速度進行最佳化，付出的代價是對計算機記憶體空間的更高使用率。演算法的時間/空間“成本”在計算中有一個特定的名稱：計算複雜度。所有函式在時間（即它們需要時間來執行）和空間上都具有計算複雜性。

# 什麼是 NgRx selector

選擇器是用於獲取儲存狀態切片( store state slices)的純函式。@ngrx/store 提供了一些幫助函式來最佳化這個選擇。

Selector 也符合單一職責及 Single responsibility，一個 selector 只 touch State 的一個片段。

使用 createSelector 和 createFeatureSelector 函式時，@ngrx/store 會跟蹤呼叫選擇器函式的最新引數。 因為選擇器是純函式，當引數匹配時可以返回最後一個結果，而無需重新呼叫選擇器函式。這可以提供效能優勢，特別是對於執行昂貴計算的選擇器。這種做法被稱為記憶。

換言之，我們雖然實現了 Selector，但是執行時，這些 selector 可能只會被執行一次，因為如果輸入引數相同，NgRx 框架會使用快取的結果直接返回給呼叫者，而不會重複呼叫我們的 Selector.

例子：Using a selector for one piece of state
```typescript
import { createSelector } from '@ngrx/store';

export interface FeatureState {
  counter: number;
}

export interface AppState {
  feature: FeatureState;
}

export const selectFeature = (state: AppState) => state.feature;

export const selectFeatureCount = createSelector(
  selectFeature,
  (state: FeatureState) => state.counter
);

console.log('ok');

```

# 例子：Using selectors for multiple pieces of state

createSelector 可用於基於相同狀態(State)的多個切片從狀態中選擇一些資料。

createSelector 函式最多可以使用 8 個選擇器函式，用於更完整的狀態選擇。

例如，假設您在狀態中有一個 selectedUser 物件。 您還有一個 allBooks 書籍物件陣列。

並且您想顯示當前使用者的所有書籍。

您可以使用 createSelector 來實現這一點。即使您在 allBooks 中更新它們，您的可見書籍也將始終是最新的。 如果選擇了一個，它們將始終顯示屬於您的使用者的書籍，如果沒有選擇使用者，它們將顯示所有書籍。

CreateSelector 裡傳入純函式。

```typescript
import { createSelector } from '@ngrx/store';

export interface User {
  id: number;
  name: string;
}

export interface Book {
  id: number;
  userId: number;
  name: string;
}

export interface AppState {
  selectedUser: User;
  allBooks: Book[];
}

export const selectUser = (state: AppState) => state.selectedUser;
export const selectAllBooks = (state: AppState) => state.allBooks;

export const selectVisibleBooks = createSelector(
  selectUser,
  selectAllBooks,
  (selectedUser: User, allBooks: Book[]) => {
    if (selectedUser && allBooks) {
      return allBooks.filter((book: Book) => book.userId === selectedUser.id);
    } else {
      return allBooks;
    }
  }
);
```

# Selecting Feature States

createFeatureSelector 是返回頂級功能狀態(Top Level Feature State)的便捷方法。它為狀態的特徵切片返回一個型別化的選擇器函式。

```typescript
import { createSelector, createFeatureSelector } from '@ngrx/store';

export const featureKey = 'feature';

export interface FeatureState {
  counter: number;
}

export interface AppState {
  feature: FeatureState;
}

export const selectFeature = createFeatureSelector<appstate featurestate="">(featureKey);

export const selectFeatureCount = createSelector(
  selectFeature,
  (state: FeatureState) => state.counter
);
```

# Resetting Memoized Selectors

透過呼叫 createSelector 或 createFeatureSelector 返回的選擇器函式最初的記憶值為 null。 在第一次呼叫選擇器後，其記憶值儲存在記憶體中。 如果隨後使用相同的引數呼叫選擇器，它將返回記憶值。 如果隨後使用不同的引數呼叫選擇器，它將重新計算並更新其記憶值。

一個例子：

```typescript
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 };

selectTotal(state); // computes the sum of 3 & 4, returning 7. selectTotal now has a memoized value of 7
selectTotal(state); // does not compute the sum of 3 & 4. selectTotal instead returns the memoized value of 7

state = { ...state, counter2: 5 };

selectTotal(state); // computes the sum of 3 & 5, returning 8. selectTotal now has a memoized value of 8
```

選擇器的記憶值無限期地保留在記憶體中。 例如，如果記憶值是不再需要的大資料集，則可以將記憶值重置為 null，以便可以從記憶體中刪除大資料集。 這可以透過呼叫選擇器上的 release 方法來完成。

```typescript
selectTotal(state); // returns the memoized value of 8
selectTotal.release(); // memoized value of selectTotal is now null
```</appstate>

NgRx Selector 的 Memoization 特性學習筆記

相關文章