The Signal Store dari NGRX - pecahan konsep utama

Ciri-ciri

• berasaskan isyarat
• berfungsi dan deklaratif
• digunakan untuk pengurusan negeri tempatan atau global
• boleh dilanjutkan dengan ciri tersuai

Bagaimanakah ia dibandingkan dengan Kedai Global NGRX?

• API yang lebih ringan dan dipermudahkan
• tidak perlu risau sangat tentang aliran data
• nampak lebih sukar untuk disalahgunakan, seperti menggunakan semula tindakan
• lebih mudah untuk dipanjangkan

Pencipta Kedai Isyarat NGRX, Marko Stanimirovic menerangkan di sini Kedai Isyarat NgRx: Pandangan Mendalam pada Pengurusan Negeri Berasaskan Isyarat dalam Sudut

Had pengurusan negeri berasaskan kelas:

• Menaip: Tidak mungkin untuk menentukan sifat kelas dinamik atau kaedah yang ditaip dengan kuat
• Gegar pokok: Kaedah kelas yang tidak digunakan tidak akan dialih keluar daripada berkas terakhir
• Kebolehlanjutan: Warisan berbilang tidak disokong.
• Modulariti: Memisahkan pemilih, pengemas kini dan kesan ke dalam kelas yang berbeza adalah mungkin, tetapi tidak disediakan di luar kotak

Mari teroka API kedai dengan contoh kod. Kami akan menggunakan projek dengan senarai produk dan ciri penapisan.

Mencipta SignalStore

• fungsi SignalStore yang mengembalikan perkhidmatan suntikan yang sesuai untuk disuntik dan disediakan di mana perlu digunakan.

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

export const ProductStore = signalStore( … );

Menyediakan Negeri denganNegeri

Seperti mana-mana Kedai NGRX setakat ini, terdapat keadaan awal yang boleh disediakan, menggunakan fungsi withState yang menerima literal objek, rekod atau fungsi kilang (untuk mencipta keadaan permulaan dinamik) sebagai input.

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

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

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

Keadaan Dikira dengan Dikira

• dibina di atas fungsi yang dikira untuk mencipta keadaan terbitan (keadaan dikira) daripada kedai

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;
   })
 })),

Melaksanakan Operasi dengan Kaedah

• ialah tempat di mana operasi kedai akan ditentukan
• ini boleh menjadi kaedah untuk mengemas kini kedai atau melaksanakan beberapa operasi berdasarkan keadaan semasanya

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 & withComputed masuk ke dalam fungsi kilang dan kembalikan kamus kaedah dan isyarat yang dikira yang boleh diakses dengan menggunakan kedai itu. Ia juga dijalankan dalam konteks suntikan, yang memungkinkan untuk menyuntik kebergantungan ke dalamnya.

Mengait dengan cangkuk

• kaedah kitaran hayat kedai, pada masa ini ia mempunyai kaedah onInit dan onDestroy

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

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

Menguruskan Koleksi denganEntiti

• gunakannya apabila perlu mengurus data seperti "Produk, Pengguna, Pelanggan, dll" yang mana operasi CRUD diperlukan untuk ciri tersebut
• ia menyediakan satu set API untuk mengurus koleksi, seperti: 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));
   },

 })),

Ada kemungkinan untuk menambah berbilang ciri yang bermula dengan "dengan" tetapi mereka boleh mengakses hanya apa yang ditakrifkan sebelum mereka.

Mencipta ciri tersuai dengan signalStoreFeature

signalStoreFeature - digunakan untuk memanjangkan kefungsian kedai.

Kedai boleh menjadi rumit dan sukar untuk diurus untuk aplikasi perusahaan besar. Apabila menulis ciri dan komponen untuk projek, lebih baik dan lebih terperinci pembahagian, lebih mudah untuk mengurus, mengekalkan kod dan menulis ujian untuknya.

Walau bagaimanapun, memandangkan API yang SignalStore sediakan kedai boleh menjadi sukar untuk diurus melainkan kod dipecahkan dengan sewajarnya. signalStoreFeature sesuai untuk mengekstrak kefungsian tertentu bagi sesuatu ciri (atau komponen) ke dalam fungsi boleh diuji kendiri yang berpotensi (dan idealnya) boleh digunakan semula di kedai lain.

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);
   },
 })),
 );
}

Kini contoh signalStoreFeature yang menunjukkan kemungkinan untuk menggunakan semula signalStoreFeature(s) merentas berbilang kedai.

import { patchState, signalStoreFeature, withMethods } daripada "@ngrx/signals";

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(),
);

Pakej utiliti NGRX Toolkit

Memandangkan begitu mudah untuk dilanjutkan, sudah ada pakej utiliti yang dipanggil ngrx-toolkit yang bertujuan untuk menambah alatan berguna pada Signal Stores.

Menyuntik SignalStore

{ providedIn: ‘root’ } atau dalam tatasusunan penyedia Komponen, Perkhidmatan, Arahan, dsb.

DeepSignals

• sifat keadaan bersarang dibaca sebagai isyarat, dijana secara malas atas permintaan

patchState

• API alternatif untuk menetapkan dan kemas kini (API isyarat) untuk mengemas kini keadaan kedai, hanya perlu diberikan nilai yang ingin kita ubah

rxMethod

• kaedah utiliti yang membantu menggunakan RxJS bersama SignalStore atau signalState

Alternatif yang lebih ringan dengan SignalState

• SignalState menyediakan alternatif untuk mengurus keadaan berasaskan isyarat dengan cara yang ringkas dan minimalis.

Menyimpulkan pemikiran

Ia masih perlu dibuktikan sejauh mana ia boleh dipercayai untuk aplikasi yang lebih besar, terutamanya apabila digunakan sebagai kedai global.

Buat masa ini saya fikir ia adalah tambahan yang bagus kepada API Isyarat lalai, menjadikannya pilihan yang baik untuk mengurus:

• keadaan tahap komponen
• keadaan berasaskan ciri

Sumber Tambahan:

https://www.stefanos-lignos.dev/posts/ngrx-signals-store
https://www.angulararchitects.io/blog/the-new-ngrx-signal-store-for-angular-2-1-flavors/ (kumpulan 4 artikel mengenai topik)
https://ngrx.io/guide/signals

Atas ialah kandungan terperinci The Signal Store dari NGRX - pecahan konsep utama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!