Meningkatkan pengalaman pengembangan
Berbicara dengan rekan kerja dari perusahaan yang berbeda, saya perhatikan bahwa begitu banyak tim menyukai NgRx. Selama diskusi kami, pikiran itu tidak meninggalkan saya:
"Akan lebih baik jika mempertahankan lebih sedikit kode, dan ikuti panduan penulisan lebih banyak untuk memfasilitasi penskalaan berikutnya . "
Ini mendorong saya untuk mulai menjelajahi berbagai teknik refactoring Redux. Saya menonton video, membaca artikel dan dokumen Redux. Pada akhirnya, saya menulis sebuah plugin untuk NgRx yang disebut NgRx Ducks
Tujuan
Pada dasarnya, ngrx-bebek diciptakan untuk menyederhanakan bekerja dengan NgRx.
- Penanganan tindakan yang disederhanakan menggunakan API Dekorator , yang mengurangi jumlah kode yang perlu ditulis untuk mengonfigurasi Peredam dan pembuat tindakan. NgRx Ducks menghasilkan pembuat aksi dan fitur peredam secara otomatis.
- Kurang dukungan teknis, karena Anda tidak perlu menulis enum atau jenis gabungan .
- Logika aplikasi yang lebih jelas disediakan berkat API yang diketik secara intuitif yang dapat Anda gunakan sebagai Layanan injeksi , yang mengatur interaksi dengan Store untuk Anda.
Bagaimana cara kerjanya?
Perpustakaan ini berfungsi sebagai lapisan tambahan pada NgRx. Secara otomatis membuat pembuat aksi dan fitur peredam untuk Anda. Selain itu, Anda mendapatkan layanan yang dapat Anda gunakan dalam komponen Anda. Layanan ini menyediakan API yang diketik secara ketat yang memungkinkan tindakan pengiriman dan memilih data dari Storage.
Perpustakaan NgRx Ducks tidak mengubah perilaku NgRx yang ada. Ini hanya mengontrol Repositori yang Dapat Diamati dan metode pengiriman .
Karena Bebek NgRx hanya bergantung pada pengiriman dan fakta bahwa Repositori memberikan Observable, Bebek NgRx tetap kompatibel dengan NgRx, bahkan jika ada perubahan kritis dalam rilis.
Instalasi
Bebek NgRx terintegrasi dengan mulus dengan proyek NgRx yang ada. Cukup instal paket npm dan Anda siap berangkat.
npm install @co-it/ngrx-ducks
API dekorator
Gagasan utama NgRx Ducks adalah untuk menggabungkan jenis tindakan dan logika mutator ( juga disebut reduksi ). Oleh karena itu, dekorator @Ducksify ditambahkan ke anotasi kelas reguler.
import { Ducksify } from '@co-it/ngrx-ducks'; @Ducksify<number>({ initialState: 0 }) export class Counter {}
Dekorator memungkinkan Anda untuk menentukan status awal negara Anda. Melewati initialState memungkinkan NgRx Ducks untuk secara otomatis menghasilkan fungsi peredam nantinya.
Sekarang Anda dapat menempatkan logika mutasi tepat di dalam kelas. Tidak perlu lagi menulis ekspresi case-switch . Sebagai gantinya, kami membuat pemetaan antara jenis tindakan dan logika mutasi menggunakan dekorator Aksi .
import { Action, Ducksify } from '@co-it/ngrx-ducks'; @Ducksify<number>({ }) export class Counter { @Action('[Counter] Increase by passed value') increaseBy(state: number, payload: number): number { return state + payload; } }
NgRx Ducks memetakan setiap Tindakan dengan logika mutasi yang sesuai. Bebek berisi semua informasi yang diperlukan untuk menghasilkan fungsi peredam.
Fungsi peredam
Fungsi peredam secara otomatis dihasilkan menggunakan NgRx Ducks. Pabrik reducerFrom membuat tabel pencarian untuk memetakan setiap jenis tindakan ke logika mutasi yang sesuai.
import { reducerFrom, DucksifiedAction, ... } from '@co-it/ngrx-ducks'; export function reducer( state: number, action: DucksifiedAction): number { return reducerFrom(Counter)(state, action); }
Anda masih perlu membungkus reducerFrom di dalam fungsi yang diekspor untuk bekerja dengan benar dengan kompiler AoT .
Peredam yang dihasilkan harus ditambahkan ke ActionReducerMap menggunakan NgRx ( lihat contoh di bawah ).
Kekuatan bebek!
Yang paling menarik belum datang! Tujuan dari NgRx Ducks adalah untuk menyederhanakan interaksi dengan Gudang. Dengan generasi otomatis fungsi peredam, semuanya baik-baik saja, jadi mari kita lihat fasad dinamis , yang juga dibuat di sini.
Dekorator @Ducksify juga menangani pendaftaran bebek Anda sebagai Layanan dalam wadah IoC Angular. Ini berarti Anda dapat menanamkan bebek di komponen Anda!
Pengiriman tindakan kubah
NgRx Ducks menambahkan beberapa perbaikan pada Duck yang memungkinkan Anda untuk menggunakan panggilan fungsi sederhana alih-alih mengirim tindakan secara manual. Anda mendapatkan API yang diketik di dalam komponen Anda.
import { Duck } from '@co-it/ngrx-ducks'; @Component({ }) export class CounterComponent { constructor(@Inject(Counter) private _counter: Duck<Counter>) { this.counter.incrementBy(42); } }
Anda menerapkan Duck, bukan Counter itu sendiri. Duck secara otomatis membuat pembuat tindakan untuk incrementBy yang mengirimkan tindakan dengan nilai yang diteruskan (payload). Berkat jenis-jenis TypeScript yang dinamis, Anda segera mendapatkan pelengkapan otomatis dalam IDE.
Singkatnya, Bebek NgRx mengotomatiskan seluruh proses pemrosesan Tindakan. Anda mengkonfigurasi tindakan sekali di Bebek, dan setelah itu Anda cukup menggunakan fasad yang diketik, dinamis, dihasilkan dan diperbarui secara otomatis untuk Anda.
Pengambilan Data dari Penyimpanan
Duck menggunakan penyeleksi NgRx untuk membaca data dari Storage. Setiap bebek memiliki helper pick yang menerima pemilih.
Mari kita bayangkan Counter kita terdaftar sebagai fungsi NgRx dengan kunci " counter ". Ini akan memungkinkan kita pengaturan pemilih berikut.
import { createFeatureSelector, createSelector} from '@ngrx/store'; const visitCounter = createFeatureSelector<number>('counter'); const count = createFeatureSelector<number>(count => count); @Component({ }) export class CounterComponent { count$: Observable<number>;constructor(@Inject(Counter) private _counter: Duck<Counter>) { this.count$ = this.counter.pick(count); this.counter.incrementBy(42); } }
Anda dapat menonton demo di stackblitz.io .
Bebek memungkinkan kedua memicu mutasi negara dan meminta data dari Repositori. Anda hanya perlu satu Layanan "dimanfaatkan", yang menyiapkan API yang nyaman untuk berinteraksi dengan Penyimpanan.
Dan akhirnya
NgRx Ducks juga terintegrasi dengan Efek! TAPI kami akan menganalisis ini secara rinci hanya di artikel berikutnya.
Jika Anda ingin mengetahuinya sekarang, Anda dapat merujuk ke contoh kompleks, yang juga tersedia di stackblitz.io.
TL; DR
- Bebek NgRx berfungsi sebagai lapisan tambahan di atas NgRx.
- Anda dapat dengan mudah mengintegrasikan Itik NgRx ke dalam proyek yang ada.
- Bebek
... secara otomatis menghasilkan pembuat aksi dan fungsi peredam
... ... membuat enumerator tindakan dan jenis serikat tidak perlu
... itu adalah fasad dinamis yang dapat tertanam dalam komponen
... ... menyediakan pengiriman otomatis yang diketik secara otomatis; tindakan maaf
... memungkinkan untuk membaca data dari Storage menggunakan pick-API
. ... dapat digunakan oleh Efek (lihat. Demo )
Itu semuanya!
Saya harap saya berhasil meyakinkan Anda untuk mencoba NgRx Ducks . Juga, saya ingin tahu apa pendapat Anda tentang perpustakaan ini. Jika Anda punya ide, cukup tulis di GitHub