NGRX 的信号存储 - 主要概念细分

特征

• 基于信号
• 函数式和声明式
• 用于本地或全局状态管理
• 可通过自定义功能进行扩展

与 NGRX 全球商店相比如何？

• 更轻量级和简化的API
• 不必太担心数据流
• 似乎更难误用，比如重用动作
• 更容易扩展

NGRX Signal Store 的创建者，Marko Stanimirovic 在此描述了 NgRx SignalStore：深入了解 Angular 中基于信号的状态管理

基于类的状态管理限制：

• 类型：不可能定义强类型的动态类属性或方法
• Tree-shaking：未使用的类方法不会从最终包中删除
• 可扩展性：不支持多重继承。
• 模块化：可以将选择器、更新器和效果拆分为不同的类，但不能开箱即用

让我们通过代码示例探索商店的 API。我们将使用一个包含产品列表和过滤功能的项目。

创建 SignalStore

• signalStore 函数返回一个适合注入并在需要使用时提供的可注入服务。

import { signalStore } from "@ngrx/signals";

export const ProductStore = signalStore( … );

提供状态withState

与迄今为止的任何 NGRX Store 一样，可以使用函数 withState 来提供初始状态，该函数接受对象文字、记录或工厂函数（用于创建动态初始状态）作为输入。

import { signalStore, withState } from "@ngrx/signals";

const initialProductState: ProductState = { products: [] };

export const ProductStore = signalStore(
 withState(initialProductState);
);

计算状态 withCompated

• 构建在计算函数之上，用于从存储创建派生状态（计算状态）

import { signalStore, withComputed, withState } from "@ngrx/signals";

export const ProductStore = signalStore(
 withState(initialProductState),
 withComputed(({products}) => ({
   averagePrice: computed(() => {
     const total = products().reduce((acc, p) => acc + p.price, 0);
     return total / products().length;
   })
 })),

执行操作 withMethods

• 这是定义商店运营的地方
• 这些可以是更新存储或根据其当前状态执行某些操作的方法

import { signalStore, withComputed, withState, withMethods } from "@ngrx/signals";

export const ProductStore = signalStore(
 withState(initialProductState),
 withComputed(({products}) => ({
   averagePrice: computed(() => {
     const total = products().reduce((acc, p) => acc + p.price, 0);
     return total / products().length;
   })
 })),


 // CRUD operations
 withMethods((store,
   productService = inject(ProductService),
 ) => ({
   loadProducts: () => {
     const products = toSignal(productService.loadProducts())
     patchState(store, { products: products() })
   },
   addProduct: (product: Product) => {
     patchState(store, { products: [...store.products(), product] });
   },
   // ...
 })),

withMethods & withCompulated 获取工厂函数并返回可以通过使用访问的方法和计算信号的字典商店。它们还在注入上下文中运行，这使得可以将依赖项注入到它们中。

挂钩 withHooks

• store 的生命周期方法，目前有 onInit 和 onDestroy 方法

import { withHooks } from "@ngrx/signals"; 

export const ProductStore = signalStore(
 withHooks((store) => ({
   onInit() {
     // Load products when the store is initialized
     store.loadProducts();
   },
 })),
);

使用实体管理集合

• 当必须管理“产品、用户、客户等”等数据时使用它，其中该功能需要 CRUD 操作
• 它提供了一组API来管理集合，例如：addEntity、setEntity、remoteEntity。

export const ProductStoreWithEntities = signalStore(
 withEntities<Product>(),


 // CRUD operations
 withMethods((store,
   productService = inject(ProductService),
 ) => ({
   loadProducts: () => {
     const products = toSignal(productService.loadProducts())();
     patchState(store, setAllEntities(products || []));
   },
   updateProduct: (product: Product) => {
     productService.updateProduct(product);
     patchState(store, setEntity(product));
   },

 })),

可以添加以“with”开头的多个功能，但它们只能访问之前定义的内容。

使用 signalStoreFeature 创建自定义功能

signalStoreFeature - 用于扩展商店的功能。

对于大型企业应用程序来说，商店可能会变得复杂且难以管理。在为项目编写功能和组件时，拆分得越好、越细，就越容易管理、维护代码和为其编写测试。

但是，考虑到 SignalStore 提供的 API，除非相应地拆分代码，否则存储可能会变得难以管理。 signalStoreFeature 适合将功能（或组件）的特定功能提取到独立的可测试函数中，该函数可能（并且理想情况下）可以在其他商店中重用。

export const ProductStore = signalStore(
 // previous defined state and methods

 // Externalizing filtering options
 withFilteringOptions(),
);


export function withFilteringOptions() {
 return signalStoreFeature(
  // Filtering operations
 withMethods(() => ({
   getProductsBetweenPriceRange: (lowPrice: number, highPrice: number, products: Array<Product>, ) => {
     return products.filter(p => p.price >= lowPrice && p.price <= highPrice);
   },


   getProductsByCategory: (category: string, products: Array<Product>) => {
     return products.filter(p => p.category === category);
   },
 })),
 );
}

现在是 signalStoreFeature 的示例，它展示了跨多个商店重用 signalStoreFeature 的可能性。

从“@ngrx/signals”导入{ patchState, signalStoreFeature, withMethods };

export function withCrudOperations() {
 return signalStoreFeature(
   withMethods((store) => ({
     load: (crudService: CrudOperations) => crudService.load(),
     update: (crudableObject: CRUD, crudService: CrudOperations) => {
       crudService.update(crudableObject);
       patchState(store, setEntity(crudableObject));
     },
   }),
 ));
}

export interface CrudOperations {
 load(): void;
 update(crudableObject: CRUD): void;
}

// Product & Customer services must extend the same interface.

export class ProductService implements CrudOperations {
 load(): void {
   console.log('load products');
 }
 update(): void {
   console.log('update products');
 }
}

export class CustomerService implements CrudOperations {
 load(): void {
   console.log('load customers');
 }
 update(): void {
   console.log('update customers');
 }
}

// and now let’s add this feature in our stores

export const ProductStore = signalStore(
 withCrudOperations(),
);


export const CustomerStore = signalStore(
 withCrudOperations(),
);

NGRX 工具包实用程序包

由于易于扩展，已经有一个名为 ngrx-toolkit 的实用程序包，旨在向信号存储添加有用的工具。

注入SignalStore

{providedIn: ‘root’} 或在组件、服务、指令等的提供者数组中

深度信号

• 嵌套状态属性读取为信号，按需延迟生成

补丁状态

• set 和 update（信号 API）的替代 API，用于更新存储状态，只需要提供我们想要更改的值

接收方法

• 帮助将 RxJS 与 SignalStore 或 signalState 一起使用的实用方法

使用 SignalState 进行更轻的替代方案

• SignalState 提供了一种以简洁和简约的方式管理基于信号的状态的替代方法。

结论性想法

对于大型应用程序来说，它的可靠性还有待证明，尤其是作为全球商店应用时。

目前我认为这是对默认 Signal API 的一个很好的补充，使其成为管理的一个不错的选择：

• 组件级别状态
• 基于特征的状态

其他资源：

https://www.stefanos-lignos.dev/posts/ngrx-signals-store
https://www.angulararchitects.io/blog/the-new-ngrx-signal-store-for-angular-2-1-flavors/（关于该主题的 4 篇文章）
https://ngrx.io/guide/signals

以上是NGRX 的信号存储 - 主要概念细分的详细内容。更多信息请关注PHP中文网其他相关文章！