Permudahkan Kod Sudut Anda dengan Entiti NgRx

Pada musim panas, saya menyegarkan kemahiran NgRx saya dengan membina aplikasi kecil untuk mengendalikan tempat kegemaran saya. Semasa proses itu, saya menikmati NgRx kerana saya mempunyai kawalan sebenar ke atas keadaan apl saya.

Satu perkara yang menyebabkan banyak bunyi ialah bilangan pemilih dan tindakan untuk ditentukan untuk operasi CRUD. Dalam projek peribadi saya, ia tidak terlalu banyak masalah, tetapi apabila saya membina aplikasi besar dengan banyak kepingan dan bahagian, bersama-sama dengan pemilih dan pengurang, kod itu menjadi lebih sukar untuk dikekalkan.

Sebagai contoh, menulis tindakan untuk kejayaan, ralat, kemas kini dan pemadaman, bersama-sama dengan pemilih untuk setiap operasi, meningkatkan kerumitan dan memerlukan lebih banyak ujian.

Di situlah Entiti NgRx masuk. Entiti NgRx mengurangkan kod boilerplate, memudahkan ujian, mempercepatkan masa penghantaran dan memastikan pangkalan kod lebih mudah diselenggara. Dalam artikel ini, saya akan membimbing anda melalui pemfaktoran semula pengurusan keadaan tempat dalam projek saya menggunakan Entiti NgRx untuk memudahkan logik CRUD.

Apakah dan Mengapa Entiti NgRx?

Sebelum menyelami kod, mari kita fahami dahulu apakah Entiti NgRx dan mengapa anda perlu mempertimbangkan untuk menggunakannya.

Apakah itu @NgRx/Entities

Entiti NgRx ialah lanjutan daripada NgRx yang memudahkan kerja dengan pengumpulan data. Ia menyediakan satu set utiliti yang memudahkan untuk melaksanakan operasi seperti menambah, mengemas kini dan mengalih keluar entiti daripada keadaan, serta memilih entiti daripada kedai.

Mengapa Saya Perlu Berpindah ke Entiti NgRx?

Apabila membina operasi CRUD untuk koleksi, menulis kaedah secara manual dalam pengurang dan mencipta pemilih berulang untuk setiap operasi boleh membosankan dan terdedah kepada ralat. Entiti NgRx melepaskan banyak tanggungjawab ini, mengurangkan jumlah kod yang anda perlukan untuk menulis dan mengekalkan. Dengan meminimumkan kod boilerplate, Entiti NgRx membantu mengurangkan hutang teknikal dan memudahkan pengurusan negeri dalam aplikasi yang lebih besar.

Bagaimana Ia Berfungsi?

Entiti NgRx menyediakan alatan seperti EntityState, EntityAdapter dan pemilih pratakrif untuk menyelaraskan kerja dengan koleksi.

EntityState

Antara muka EntityState ialah teras Entiti NgRx. Ia menyimpan koleksi entiti menggunakan dua sifat utama:

• id: susunan ID entiti.

• entiti: kamus di mana setiap entiti disimpan mengikut IDnya.
  

interface EntityState<V> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}

Baca lebih lanjut tentang Negeri Entiti

EntityAdapter

EntityAdapter dicipta menggunakan fungsi createEntityAdapter. Ia menyediakan banyak kaedah pembantu untuk mengurus entiti dalam negeri, seperti menambah, mengemas kini dan mengalih keluar entiti. Selain itu, anda boleh mengkonfigurasi cara entiti dikenal pasti dan diisih.

interface EntityState<V> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}

EntityAdapter juga membolehkan anda menentukan cara entiti dikenal pasti (selectId) dan cara koleksi harus diisih menggunakan sortComparer.

Baca lebih lanjut tentang EntityAdapter

Sekarang kita memahami asasnya, mari lihat bagaimana kita boleh memfaktorkan semula pengurusan keadaan tempat dalam aplikasi kita menggunakan Entiti NgRx

Projek Persediaan

Mula-mula, klon repositori dari artikel sebelumnya dan tukar ke cawangan yang mempunyai persediaan CRUD asas:

export const adapter: EntityAdapter<Place> = createEntityAdapter<Place>();

?Artikel ini adalah sebahagian daripada siri saya tentang pembelajaran NgRx. Jika anda ingin mengikutinya, sila semaknya.

https://www.danywalls.com/understanding-when-and-why-to-implement-ngrx-in-angular

https://www.danywalls.com/how-to-debug-ngrx-using-redux-devtools

https://www.danywalls.com/how-to-implement-actioncreationgroup-in-ngrx

https://www.danywalls.com/how-to-use-ngrx-selectors-in-angular

https://danywalls.com/when-to-use-concatmap-mergemap-switchmap-and-exhaustmap-operators-in-building-a-c rud-dengan-ngrx

https://danywalls.com/handling-router-url-parameters-using-ngrx-router-store

Cawangan ini mengandungi persediaan di mana NgRx sudah dipasang dan MockAPI.io dikonfigurasikan untuk panggilan API.

Matlamat kami adalah untuk menggunakan entiti NgRx untuk mengurus tempat, tindakan refactorion untuk operasi CRUD, kemas kini pengurang untuk memudahkannya menggunakan operasi penyesuai seperti menambah, mengemas kini dan memadam tempat, gunakan pemilih untuk mendapatkan semula senarai tempat daripada kedai.

Memasang Entiti NgRx

Mula-mula, pasang kebergantungan projek dengan npm i, dan kemudian tambah Entiti NgRx menggunakan skema dengan menjalankan ng add @ngrx/entity.

git clone https://github.com/danywalls/start-with-ngrx.git
git checkout crud-ngrx
cd start-with-ngrx

Sempurna, kami bersedia untuk memulakan refactor kami!

Memfaktorkan semula Negara

Dalam versi projek sebelumnya, kami menentukan tatasusunan dan pengurang secara manual untuk mengurus keadaan. Dengan Entiti NgRx, kami membenarkan penyesuai menguruskan logik koleksi untuk kami.

Pertama, buka places.state.ts dan faktorkan semula PlacesState untuk melanjutkan dari EntityState.

npm i
ng add @ngrx/entity

Seterusnya, mulakan penyesuai entiti untuk entiti Tempat kami menggunakan createEntityAdapter:

interface EntityState<V> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}

Akhir sekali, gantikan initialState manual dengan yang disediakan oleh penyesuai menggunakan getInitialState:

export const adapter: EntityAdapter<Place> = createEntityAdapter<Place>();

Kami telah memfaktorkan semula keadaan untuk menggunakan EntityState dan memulakan EntityAdapter untuk mengendalikan senarai tempat secara automatik.

mari kita bergerak untuk mengemas kini tindakan untuk menggunakan Entiti NgRx.

Memfaktorkan semula Tindakan

Dalam artikel sebelumnya, saya mengendalikan kemas kini dan pengubahsuaian kepada entiti secara manual. Kini, kami akan menggunakan Entiti NgRx untuk mengendalikan kemas kini separa menggunakan Kemas Kini.

Dalam places.actions.ts, kami mengemas kini tindakan Tempat Kemas Kini untuk menggunakan Kemas Kini, yang membenarkan kami mengubah suai hanya sebahagian daripada entiti:

git clone https://github.com/danywalls/start-with-ngrx.git
git checkout crud-ngrx
cd start-with-ngrx

Sempurna, kami mengemas kini tindakan untuk bekerja dengan Entiti NgRx, menggunakan jenis Kemas Kini untuk memudahkan pengendalian kemas kini. Sudah tiba masanya untuk melihat bagaimana ini memberi kesan kepada pengurang dan memfaktorkannya semula untuk menggunakan kaedah penyesuai entiti untuk operasi seperti menambah, mengemas kini dan mengalih keluar tempat.

Memfaktorkan semula Pengurangan

Pengurang adalah tempat Entiti NgRx benar-benar bersinar. Daripada menulis logik manual untuk menambah, mengemas kini dan memadamkan tempat, kami kini menggunakan kaedah yang disediakan oleh penyesuai entiti.

Begini cara kita boleh memudahkan pengurang:

npm i
ng add @ngrx/entity

Kami telah menggunakan kaedah seperti addOne, updateOne, removeOne dan setAll daripada penyesuai untuk mengendalikan entiti dalam keadaan.

Kaedah lain yang berguna termasuk:

• addMany: Menambah berbilang entiti.

• removeMany: Mengalih keluar berbilang entiti melalui ID.

• upsertOne: Menambah atau mengemas kini entiti berdasarkan kewujudannya.

Baca lebih lanjut tentang kaedah pengurang dalam EntityAdapter.

Dengan keadaan, tindakan dan pengurang difaktorkan semula, kami kini akan memfaktorkan semula pemilih untuk memanfaatkan Entiti NgRx’ pemilih pratakrif.

Memfaktorkan semula Pemilih

Entiti NgRx menyediakan satu set pemilih yang dipratentukan yang menjadikan pertanyaan kedai lebih mudah. Saya akan menggunakan pemilih seperti selectAll, selectEntities dan selectIds terus daripada penyesuai.

Begini cara kami memfaktorkan semula pemilih di places.selectors.ts:

export type PlacesState = {
  placeSelected: Place | undefined;
  loading: boolean;
  error: string | undefined;
} & EntityState<Place>;

Pemilih terbina dalam ini mengurangkan keperluan untuk membuat pemilih secara manual untuk mengakses keadaan.

Selepas memfaktorkan semula pemilih untuk menggunakan pemilih yang dipratentukan, mengurangkan keperluan untuk mentakrifkan pemilih saya secara manual, tiba masanya untuk mengemas kini komponen borang kami untuk mencerminkan perubahan ini dan menggunakan keadaan dan tindakan baharu.

Mengemas kini Komponen Borang

Sekarang kami telah memfaktorkan keadaan, tindakan dan pengurang, kami perlu mengemas kini komponen borang untuk mencerminkan perubahan ini.

Sebagai contoh, dalam PlaceFormComponent, kami boleh mengemas kini kaedah simpan untuk menggunakan Kemas Kini taip apabila menyimpan perubahan:

interface EntityState<V> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}

Kami mengemas kini komponen borang kami untuk menggunakan tindakan baharu dan nyatakan difaktorkan semula, mari bergerak , mari semak kesan kami untuk memastikan ia berfungsi dengan betul dengan Entiti NgRx

Kesan Pemfaktoran Semula

Akhir sekali, saya akan membuat kesan berfungsi dengan Entiti NgRx, kami hanya perlu mengemas kini PlacesPageActions.updatePlace lulus Kemas Kini objek dalam kesan updatePlaceEffect$.

export const adapter: EntityAdapter<Place> = createEntityAdapter<Place>();

Selesai! Saya benarkan aplikasi kami berfungsi dengan Entiti NgRx dan penghijrahannya sangat mudah !, dokumentasi entiti ngrx sangat membantu dan

Kesimpulan

Selepas mengalihkan kod saya ke Entiti NgRx, saya merasakan ia membantu mengurangkan kerumitan dan pelat dandang apabila bekerja dengan koleksi. Entiti NgRx memudahkan kerja dengan koleksi dan interaksi dengan sejumlah besar kaedahnya untuk kebanyakan senario, menghapuskan banyak kod plat dandang yang diperlukan untuk operasi CRUD.

Saya harap artikel ini mendorong anda untuk menggunakan ngrx-entiti apabila anda perlu bekerja dengan koleksi dalam ngrx.

• kod sumber: https://github.com/danywalls/start-with-ngrx/tree/ngrx-entities

Foto oleh Yonko Kilasi di Unsplash

Atas ialah kandungan terperinci Permudahkan Kod Sudut Anda dengan Entiti NgRx. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!