NGRX의 신호 저장소 - 주요 개념 분석

형질

• 신호 기반
• 기능적이고 선언적
• 로컬 또는 글로벌 상태 관리에 사용
• 맞춤 기능으로 확장 가능

NGRX 글로벌 스토어와 비교하면 어떤가요?

• 더 가볍고 단순화된 API
• 데이터 흐름에 대해 크게 걱정할 필요가 없습니다
• 액션을 재사용하는 등 오용하기가 더 어려워 보입니다
• 더 쉬운 확장

NGRX Signal Store의 창시자인 Marko Stanimirovic이 NgRx SignalStore: Angular의 신호 기반 상태 관리에 대해 자세히 설명합니다

클래스 기반 상태 관리 제한사항:

• 입력: 강력한 형식의 동적 클래스 속성이나 메서드를 정의하는 것은 불가능합니다
• 트리 쉐이킹: 사용하지 않은 클래스 메소드는 최종 번들에서 제거되지 않습니다
• 확장성: 다중 상속은 지원되지 않습니다.
• 모듈성: 선택기, 업데이트 프로그램 및 효과를 다른 클래스로 분할하는 것이 가능하지만 기본적으로 제공되지는 않습니다

코드 예시를 통해 스토어의 API를 살펴보겠습니다. 제품 및 필터링 기능 목록이 포함된 프로젝트를 사용하겠습니다.

SignalStore 만들기

• 사용이 필요한 곳에 주입하고 제공하기에 적합한 주입 가능한 서비스를 반환하는 signalStore 함수입니다.

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

export const ProductStore = signalStore( … );

상태 withState 제공

지금까지 모든 NGRX 저장소와 마찬가지로 객체 리터럴, 레코드 또는 팩토리 함수(동적 초기 상태 생성용)를 입력으로 받아들이는 withState 함수를 사용하여 제공할 수 있는 초기 상태가 있습니다.

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

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

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

계산된 상태 withCompulated

• 스토어에서 파생된 상태(계산된 상태)를 생성하기 위해 계산된 함수 위에 구축됨

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 팩토리 함수에 들어가서 다음을 사용하여 액세스할 수 있는 메서드 및 계산된 신호 사전을 반환합니다. 가게. 또한 주입 컨텍스트에서 실행되므로 종속성을 주입할 수 있습니다.

Hooks로 후킹

• 스토어의 라이프사이클 메소드에는 현재 onInit 및 onDestroy 메소드가 있습니다.

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

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

엔티티를 사용하여 컬렉션 관리

• 제품, 사용자, 클라이언트 등의 데이터를 관리해야 하며 해당 기능에 CRUD 작업이 필요한 경우 사용하세요
• addEntity, setEntity, remoteEntity와 같은 컬렉션을 관리하는 API 세트를 제공합니다.

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 툴킷 유틸리티 패키지

확장하기가 쉽기 때문에 Signal Stores에 유용한 도구를 추가하기 위한 ngrx-toolkit이라는 유틸리티 패키지가 이미 있습니다.

SignalStore 주입

{ 제공된In: 'root' } 또는 구성 요소, 서비스, 지시문 등의 공급자 배열

딥시그널스

• 신호로 읽혀지고 요청 시 느리게 생성되는 중첩 상태 속성

패치상태

• 스토어의 상태를 업데이트하기 위한 설정 및 업데이트(신호 API의) 대체 API는 변경하려는 값만 제공하면 됩니다

rx메소드

• 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!