1. 了解 Memoized Selector

在 @ngrx/store 開(kāi)發(fā)包中，MemoizedSelector 是一個(gè)重要的概念和工具，用于在 Angular 應(yīng)用中管理和選擇 Redux 狀態(tài)的片段。它是 @ngrx/store 的一個(gè)關(guān)鍵特性，通過(guò)使用 reselect 庫(kù)來(lái)實(shí)現(xiàn)對(duì)狀態(tài)選擇器的優(yōu)化。MemoizedSelector 可以提高狀態(tài)選擇器的性能，并且能夠避免不必要的狀態(tài)計(jì)算，從而提高應(yīng)用的效率和響應(yīng)性。

在本文中，我們將深入了解 MemoizedSelector 的概念和用法，并通過(guò)具體的示例詳細(xì)說(shuō)明它的使用方法和優(yōu)勢(shì)。

在 Redux 應(yīng)用中，狀態(tài)管理是非常重要的。使用 @ngrx/store 開(kāi)發(fā)包可以在 Angular 應(yīng)用中輕松實(shí)現(xiàn) Redux 模式。其中，選擇器（Selector）是用于從 Redux 狀態(tài)樹(shù)中獲取特定數(shù)據(jù)片段的函數(shù)。選擇器允許我們?cè)趹?yīng)用中組織和重用狀態(tài)的讀取邏輯。

@ngrx/store 中的選擇器分為兩類(lèi)：

• 普通選擇器（Selector）：每次調(diào)用時(shí)都會(huì)計(jì)算和返回新的結(jié)果。這可能會(huì)導(dǎo)致性能問(wèn)題，特別是在復(fù)雜狀態(tài)計(jì)算時(shí)。
• Memoized 選擇器（MemoizedSelector）：使用 reselect 庫(kù)實(shí)現(xiàn)的選擇器。Memoized 選擇器會(huì)緩存計(jì)算結(jié)果，并在相同的輸入條件下直接返回緩存的結(jié)果，而不會(huì)重新計(jì)算。這樣可以避免不必要的計(jì)算和性能損失。

2. Memoized Selector 的用法

在 Angular 應(yīng)用中，我們通常會(huì)使用 createFeatureSelector 和 createSelector 函數(shù)來(lái)定義 Memoized 選擇器。createFeatureSelector 用于創(chuàng)建特定 feature 下的選擇器，而 createSelector 用于創(chuàng)建具體的 Memoized 選擇器。

2.1 創(chuàng)建 Feature 選擇器（createFeatureSelector）

createFeatureSelector 函數(shù)用于創(chuàng)建一個(gè)特定的 feature 下的選擇器，它接收一個(gè)特定 feature 的標(biāo)識(shí)符作為參數(shù)，并返回一個(gè)選擇器函數(shù)。該選擇器函數(shù)會(huì)從根狀態(tài)中選擇特定 feature 下的狀態(tài)片段。

import { createFeatureSelector } from '@ngrx/store';
// 創(chuàng)建 Feature 選擇器
const featureSelector = createFeatureSelector<FeatureState>('featureName');

上述代碼中，我們創(chuàng)建了一個(gè)名為 featureSelector 的 Feature 選擇器，并將其與特定 feature 的標(biāo)識(shí)符 'featureName' 關(guān)聯(lián)起來(lái)。這樣，featureSelector 將用于選擇來(lái)自名為 'featureName' 的 feature 下的狀態(tài)片段。

2.2 創(chuàng)建 Memoized 選擇器（createSelector）

createSelector 函數(shù)用于創(chuàng)建 Memoized 選擇器，它接收一系列輸入選擇器（可以是 Feature 選擇器或其他 Memoized 選擇器），以及一個(gè)輸出函數(shù)。輸出函數(shù)用于從輸入選擇器的結(jié)果中選擇特定的狀態(tài)片段，并進(jìn)行任意的轉(zhuǎn)換或計(jì)算。

import { createSelector } from '@ngrx/store';
// 創(chuàng)建 Memoized 選擇器
const memoizedSelector = createSelector(
  featureSelector,
  (featureState) => featureState.someData
);

上述代碼中，我們創(chuàng)建了一個(gè)名為 memoizedSelector 的 Memoized 選擇器。它接收來(lái)自 featureSelector 的結(jié)果 featureState 作為輸入，然后從中選擇 featureState.someData 這個(gè)狀態(tài)片段。這里的 someData 可以是特定 feature 下的某個(gè)屬性或者經(jīng)過(guò)復(fù)雜計(jì)算得到的狀態(tài)。

Memoized 選擇器會(huì)緩存 featureState.someData 的計(jì)算結(jié)果，并在相同的輸入條件下直接返回緩存的結(jié)果，避免不必要的計(jì)算。

2.3 使用 Memoized 選擇器

在應(yīng)用中使用 Memoized 選擇器的過(guò)程非常簡(jiǎn)單。我們可以像調(diào)用普通函數(shù)一樣調(diào)用 Memoized 選擇器，并傳入所需的輸入條件。Memoized 選擇器將根據(jù)輸入條件進(jìn)行狀態(tài)選擇，并返回緩存的結(jié)果或者進(jìn)行計(jì)算后返回結(jié)果。

// 使用 Memoized 選擇器
store.select(memoizedSelector).subscribe((data) => {
  console.log('Selected data:', data);
});

上述代碼中，我們通過(guò) store.select() 方法調(diào)用 memoizedSelector Memoized 選擇器，并通過(guò) subscribe 訂閱狀態(tài)的變化。當(dāng)狀態(tài)變化時(shí)，memoizedSelector 將根據(jù)輸入條件進(jìn)行狀態(tài)選擇，并返回緩存的結(jié)果或計(jì)算后的結(jié)果。最終，我們會(huì)在控制臺(tái)中看到所選數(shù)據(jù)的輸出。

3. Memoized Selector 的優(yōu)勢(shì)

Memoized 選擇器在 Angular 應(yīng)用中有許多優(yōu)勢(shì)，特別是在處理復(fù)雜狀態(tài)計(jì)算時(shí)：

3.1 提高性能

Memoized 選擇器通過(guò)緩存計(jì)算結(jié)果來(lái)避免不必要的狀態(tài)計(jì)算，從而提高應(yīng)用的性能。當(dāng)選擇器的輸入條件沒(méi)有變化時(shí)，Memoized 選擇器將直接返回之前緩存的結(jié)果，而不會(huì)重新計(jì)算。這在大型應(yīng)用和復(fù)雜狀態(tài)計(jì)算的情況下尤為重要，可以減少重復(fù)計(jì)算的開(kāi)銷(xiāo)，提升應(yīng)用的響應(yīng)性能。

3.2 避免不必要的狀態(tài)更新

由于 Memoized 選擇器會(huì)緩存計(jì)算結(jié)果，當(dāng)狀態(tài)變化時(shí)，只有依賴(lài)于輸入條件的數(shù)據(jù)發(fā)生變化時(shí)，Memoized 選擇器才會(huì)返回新的結(jié)果。這樣可以避免不必要的狀態(tài)更新，減少不必要的組件重新渲染，提高應(yīng)用的效率。

3.3 支持復(fù)雜狀態(tài)計(jì)算

Memoized 選擇器非常適用于處理復(fù)雜的狀態(tài)計(jì)算邏輯。通過(guò)組合多個(gè)選擇器和輸出函數(shù)，我們可以輕松地實(shí)現(xiàn)復(fù)雜的狀態(tài)轉(zhuǎn)換和計(jì)算。Memoized 選擇器的

緩存機(jī)制可以確保只有在必要時(shí)才進(jìn)行狀態(tài)計(jì)算，避免重復(fù)工作。

3.4 代碼重用和組織

Memoized 選擇器允許我們將狀態(tài)選擇邏輯從組件中分離出來(lái)，實(shí)現(xiàn)代碼的重用和組織。我們可以將復(fù)雜的狀態(tài)選擇邏輯放在 Memoized 選擇器中，并在不同的組件中重復(fù)使用這些選擇器。這樣可以保持組件簡(jiǎn)單，更易于維護(hù)。

4. 示例：使用 Memoized 選擇器管理購(gòu)物車(chē)狀態(tài)

現(xiàn)在，我們通過(guò)一個(gè)購(gòu)物車(chē)示例來(lái)演示如何使用 Memoized 選擇器來(lái)管理復(fù)雜的狀態(tài)邏輯。假設(shè)我們有一個(gè)購(gòu)物車(chē)應(yīng)用，其中包含多個(gè)商品和購(gòu)物車(chē)狀態(tài)。每個(gè)商品都有一個(gè)唯一的 ID、名稱(chēng)、價(jià)格和數(shù)量。購(gòu)物車(chē)狀態(tài)是購(gòu)物車(chē)中所有商品的集合。

我們首先定義購(gòu)物車(chē)的狀態(tài)接口：

interface CartItem {
  id: number;
  name: string;
  price: number;
  quantity: number;
}
interface CartState {
  items: CartItem[];
  total: number;
}

接下來(lái)，我們創(chuàng)建購(gòu)物車(chē)的 @ngrx/store 特性模塊，并定義 Memoized 選擇器來(lái)管理購(gòu)物車(chē)狀態(tài)。

// cart.actions.ts
import { createAction, props } from '@ngrx/store';
import { CartItem } from './cart-state.interface';
// 添加商品到購(gòu)物車(chē)
export const addToCart = createAction(
  '[Cart] Add To Cart',
  props<{ item: CartItem }>()
);
// 從購(gòu)物車(chē)中刪除商品
export const removeFromCart = createAction(
  '[Cart] Remove From Cart',
  props<{ itemId: number }>()
);
// cart.reducer.ts
import { createReducer, on } from '@ngrx/store';
import { CartState, CartItem } from './cart-state.interface';
import { addToCart, removeFromCart } from './cart.actions';
// 初始化購(gòu)物車(chē)狀態(tài)
const initialState: CartState = {
  items: [],
  total: 0,
};
// 創(chuàng)建購(gòu)物車(chē)狀態(tài) reducer
export const cartReducer = createReducer(
  initialState,
  on(addToCart, (state, { item }) => {
    // 判斷商品是否已存在于購(gòu)物車(chē)中
    const existingItem = state.items.find((i) => i.id === item.id);
    if (existingItem) {
      // 商品已存在，更新數(shù)量和總價(jià)
      const updatedItems = state.items.map((i) =>
        i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i
      );
      return {
        ...state,
        items: updatedItems,
        total: state.total + item.price,
      };
    } else {
      // 商品不存在，添加新商品到購(gòu)物車(chē)
      const newItem: CartItem = { ...item, quantity: 1 };
      return {
        ...state,
        items: [...state.items, newItem],
        total: state.total + item.price,
      };
    }
  }),
  on(removeFromCart, (state, { itemId }) => {
    // 根據(jù)商品 ID 從購(gòu)物車(chē)中刪除商品
    const updatedItems = state.items.filter((i) => i.id !== itemId);
    const removedItem = state.items.find((i) => i.id === itemId);
    return {
      ...state,
      items: updatedItems,
      total: state.total - (removedItem ? removedItem.price * removedItem.quantity : 0),
    };
  })
);

在上述代碼中，我們首先定義了購(gòu)物車(chē)狀態(tài)接口 CartState 和商品接口 CartItem。接著，我們創(chuàng)建了兩個(gè) @ngrx/store 的 action：addToCart 和 removeFromCart。這些 action 將用于修改購(gòu)物車(chē)的狀態(tài)。

然后，我們定義了購(gòu)物車(chē)的狀態(tài) reducer cartReducer，其中使用 on 函數(shù)來(lái)處理不同的 action。在 addToCart 處理邏輯中，我們判斷商品是否已經(jīng)存在于購(gòu)物車(chē)中，如果存在則更新數(shù)量和總價(jià)，否則將新商品添加到購(gòu)物車(chē)。在 removeFromCart 處理邏輯中，我們根據(jù)商品 ID 從購(gòu)物車(chē)中刪除商品，并相應(yīng)地更新總價(jià)。

現(xiàn)在，我們來(lái)創(chuàng)建 Memoized 選擇器來(lái)從購(gòu)物車(chē)狀態(tài)中選擇特定數(shù)據(jù)片段。

// cart.selectors.ts
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { CartState } from './cart-state.interface';
// 創(chuàng)建購(gòu)物車(chē) Feature 選擇器
export const selectCartState = createFeatureSelector<CartState>('cart');
// 創(chuàng)建 Memoized 選擇器：選擇購(gòu)物車(chē)中的所有商品
export const selectCartItems = createSelector(
  selectCartState,
  (cartState) => cartState.items
);
// 創(chuàng)建 Memoized 選擇器：選擇購(gòu)物車(chē)中的商品總價(jià)
export const selectCartTotal = createSelector(
  selectCartState,
  (cartState) => cartState.total
);

在上述代碼中，我們首先使用 createFeatureSelector 創(chuàng)建購(gòu)物車(chē)的 Feature 選擇器 selectCartState。接著，我們使用 createSelector 來(lái)創(chuàng)建兩個(gè) Memoized 選擇器：selectCartItems 和 selectCartTotal。selectCartItems Memoized 選擇器選擇購(gòu)物車(chē)狀態(tài)中的 items，而 selectCartTotal 選擇購(gòu)物車(chē)狀態(tài)中的 total。

現(xiàn)在，我們可以在組件中使用這些 Memoized 選擇器來(lái)選擇購(gòu)物車(chē)狀態(tài)的特定數(shù)據(jù)片段。

// cart.component.ts
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { CartItem } from './cart-state.interface';
import { addToCart, removeFromCart } from './cart.actions';
import { selectCartItems, selectCartTotal } from './cart.selectors';
import { Observable } from 'rxjs';
@Component({
  selector: 'app-cart',
  template: `
    <h2>Shopping Cart</h2>
    <div *ngFor="let item of cartItems$ | async">
      <p>{{ item.name }} - Quantity: {{ item.quantity }} - Price: ${{ item.price }}</p>
      <button (click)="removeItemFromCart(item.id)">Remove</button>
    </div>
    <p>Total Price: ${{ cartTotal$ | async }}</p>
  `,
})
export class CartComponent {
  cartItems$: Observable<CartItem[]>;
  cartTotal$: Observable<number>;
  constructor(private store: Store) {
    this.cartItems$ = this.store.select(selectCartItems);
    this.cartTotal$ = this.store.select(selectCartTotal);
  }
  addItemToCart(item: CartItem) {
    this.store.dispatch(addToCart({ item }));
  }
  removeItemFromCart(itemId: number) {
    this.store.dispatch(removeFromCart({ itemId }));
  }
}

在購(gòu)物車(chē)組件中，我們使用 store.select() 方法調(diào)用 selectCartItems 和 selectCartTotal Memoized 選擇器，以獲取購(gòu)物車(chē)中的所有商品和總價(jià)。然后，我們?cè)谀０逯惺褂?nbsp;async 管道來(lái)處理 Observable 數(shù)據(jù)，實(shí)時(shí)顯示購(gòu)物車(chē)的商品列表和總價(jià)。

通過(guò)使用 Memoized 選擇器，我們可以高效地管理購(gòu)物車(chē)狀態(tài)，并根據(jù)購(gòu)物車(chē)中的商品動(dòng)態(tài)更新應(yīng)用界面。

5. 總結(jié)

MemoizedSelector 是 @ngrx/store 開(kāi)發(fā)包中的一個(gè)重要概念，它通過(guò)使用 reselect 庫(kù)來(lái)實(shí)現(xiàn)對(duì)狀態(tài)選擇器的優(yōu)化。Memoized 選擇器可以提高應(yīng)用的性能，避免不必要的狀態(tài)計(jì)算，并支持復(fù)雜狀態(tài)邏輯的處理。

通過(guò) createFeatureSelector 和 createSelector 函數(shù)，我們可以輕松地創(chuàng)建特定 feature 下的選擇器和 Memoized 選擇器。Memoized 選擇器在 Angular 應(yīng)用中非常有用，特別是在管理大型狀態(tài)樹(shù)和復(fù)雜狀態(tài)計(jì)算時(shí)，能夠有效地提高應(yīng)用的性能和響應(yīng)性。

在實(shí)際開(kāi)發(fā)中，我們應(yīng)該充分利用 MemoizedSelector 的優(yōu)勢(shì)，并將狀態(tài)選擇邏輯盡可能地抽象成可復(fù)用的選擇器，以提高代碼的可維護(hù)性和重用性。同時(shí)，我們也應(yīng)該注意避免濫用 Memoized 選擇器，避免創(chuàng)建過(guò)多的選擇器導(dǎo)致不必要的內(nèi)存占用。綜合考慮性能和可維護(hù)性，合理使用 Memoized 選擇器將有助于構(gòu)建高效、可擴(kuò)展的 Angular 應(yīng)用。

以上就是什么是@ngrx/store開(kāi)發(fā)包中的MemoizedSelector的詳細(xì)內(nèi)容，更多關(guān)于@ngrx/store開(kāi)發(fā)包MemoizedSelector的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論