Get best of the week

Angular: contoh menggunakan NGRX

gambar
Artikel ini merupakan kelanjutan dari postingan “Angular: An Introductory Introduction to NGRX.”

Contoh NGRX


Dalam contoh kami, akan ada daftar pengguna, halaman detail pengguna, dan beberapa informasi konfigurasi awal yang harus Anda dapatkan ketika Anda memulai aplikasi. Kami akan menerapkan beberapa utas NGRX yang penting.

Rencana aksi:

  1. Instalasi perpustakaan
  2. Membuat struktur folder untuk penyimpanan
  3. Penciptaan nilai penyimpanan dan awal
  4. Menciptakan Tindakan
  5. Membuat Gearbox (Reduksi)
  6. Menciptakan Efek
  7. Membuat Selectors
  8. Pengaturan akhir
  9. Menggunakan penyimpanan dalam komponen

Jadi mari kita lakukan ...

Instalasi perpustakaan


Kita akan menggunakan Angle Cli untuk membuat proyek, dan kemudian kita akan menambahkan perpustakaan ngrx.

Buat proyek:

ng new angular-ngrx --style=scss

Tambahkan perpustakaan NGRX yang diperlukan:

npm install @ngrx/core @ngrx/store @ngrx/effects @ngrx/store-devtools @ngrx/router-store --save

Kami memasang hampir semua pustaka ekosistem ngrx. Sebagian besar dari mereka menggambarkan tujuan mereka dengan sangat jelas: kernel, penyimpanan, efek, tetapi ada beberapa yang Anda mungkin bertanya-tanya mengapa mereka diperlukan?

  • store-devtools - Alat debugging yang kuat.
  • router-store - Menyimpan status router sudut dalam penyimpanan.

Struktur folder untuk penyimpanan


Mari kita mulai dengan membahas struktur file repositori. Struktur file ini dan seluruh konfigurasi penyimpanan harus ada di modul utama aplikasi Anda, tetapi dalam contoh kami tidak ada, oleh karena itu penyimpanan akan ada di modul utama aplikasi kami (langkah-langkahnya hampir sama jika Anda melakukan ini di modul utama).

gambar

Struktur folder adalah representasi dari komposisi penyimpanan yang sebenarnya. Anda akan memiliki folder utama dengan nama "store" dan lima subfolder yang mewakili masing-masing pemain utama di store: "Actions", "Effects", "Redurs", "Selectors" dan "State".

Penciptaan nilai penyimpanan dan awal


Seperti yang kami sebutkan sebelumnya, kami akan memiliki dua bagian utama: aplikasi, pengguna, dan konfigurasi kami. Untuk keduanya, kita perlu membuat keadaan dan keadaan awal, dan juga melakukan hal yang sama untuk keadaan aplikasi.

Kami menciptakan dua antarmuka untuk definisi dan konfigurasi pengguna. Kami juga punya satu untuk respons HTTP pengguna, itu hanya array IUser.

gambar

gambar

Mari kita mulai dengan status pengguna (store / state / user.state.ts):

gambar

Apa yang kita lakukan di sini:

  1. Kami membuat dan mengekspor antarmuka dengan struktur lingkungan pengguna.
  2. Kami melakukan hal yang sama dengan keadaan pengguna awal, yang mengimplementasikan antarmuka yang baru dibuat.

Untuk keadaan konfigurasi, kita melakukan hal yang sama (store / state / config.state.ts):

gambar

Akhirnya, kita perlu membuat status aplikasi (store / state / app.state.ts):

gambar

  1. Status aplikasi berisi status pengguna dan konfigurasi, serta status router.
  2. Kemudian kita mengatur status awal aplikasi.
  3. Akhirnya, ia mengekspor fungsi untuk mendapatkan status awal (kami akan menggunakannya nanti).

Menciptakan Tindakan


Pastikan untuk membaca definisi tindakan yang kita bahas di artikel sebelumnya .
Kita perlu membuat tindakan untuk pengguna dan pengaturan. Mari kita mulai dengan aksi pengguna (store / action / user.actions.ts):

gambar

Mari kita sedikit menelusuri kode:

  1. Enum, . , , , .
  2. . Action ngrx. , , , .
  3. , , . , , , .

Dan itu saja ... membuat tindakan itu mudah. Mari kita lihat seperti apa bentuk tindakan konfigurasi (store / action / config.actions.ts):

gambar

Tidak ada yang baru di sini, Anda mungkin sekarang merasa nyaman dengan semua yang terjadi dalam file ini.

Hebat, kami sudah menentukan status dan tindakan ... mari kita buat persneling!

Membuat Gearbox


Pastikan untuk membaca definisi gearbox yang telah kita bahas di artikel sebelumnya .
Kami akan memiliki kotak roda gigi yang merespons beberapa tindakan, karena yang lain akan ditangani oleh efek yang akan kami implementasikan nanti.

Kita akan membutuhkan reducer untuk pengguna dan konfigurasi lainnya, tetapi kita juga perlu membuat reduksi aplikasi, mari kita mulai dengan melihat reduksi pengguna (store / redurs / user.reducers.ts):

gambar

Mari kita bahas implementasinya:

  1. Deklarasi peredam menerima status dan, dalam hal ini, tindakan pengguna dan mengembalikan IUserState.
  2. Menggunakan pernyataan beralih, kami menghasilkan pengamatan untuk setiap jenis tindakan yang mungkin.
  3. Setiap kasus mengembalikan objek baru, yang merupakan hasil dari penggabungan negara lama dan nilai baru.
  4. Semua gearbox memiliki hasil default, yang hanya mengembalikan keadaan tanpa perubahan.

Dan itu semua. Anda tidak akan menemukan apa pun di gearbox. Mari kita lihat reducers konfigurasi (state / redurs / config.reducers.ts):

gambar

Akhirnya, mari kita lihat pada aplikasi reducers (store):

gambar

Di sini kita menambahkan semua reducers ke peta reducer aplikasi. Kami menggunakan peta peredam aksi untuk pemeriksaan tipe tambahan. Nanti kita akan menyediakan aplikasi ini dengan reduksi untuk modul toko.

Tambahkan Efek


Pastikan untuk membaca definisi "Efek," yang kita bahas dalam artikel sebelumnya .
Anda mungkin sudah memperhatikan bahwa di gearbox kami tidak memproses semua tindakan. Ini karena kita akan menangani tindakan yang terlewat dalam efek, karena tindakan ini memiliki efek samping.

Mari kita mulai dengan efek khusus (store / effects / user.effects.ts):

gambar

Banyak hal yang terjadi pada file ini. Mari kita coba jelaskan:

  1. Kami mendeklarasikan efek khusus kami menggunakan dekorator injeksi.
  2. Kami mendeklarasikan efek kami menggunakan dekorator efek yang disediakan oleh ngrx / Effects.
  3. Menggunakan tindakan yang disediakan oleh ngrx / Efek, kami akan memulai jalur pipa dari operator kami untuk efek ini.
  4. Langkah selanjutnya adalah mengatur jenis tindakan efek menggunakan ofType operator.
  5. Bagian-bagian berikut ini adalah operator rxjs yang kami gunakan untuk mendapatkan yang kami butuhkan (kami sudah memiliki tautan ke dokumentasi rxjs dalam artikel ini).
  6. Akhirnya, dalam pernyataan terakhir, Efek akan mengirim tindakan lain.
  7. Dalam konstruktor, kami mengimplementasikan layanan yang akan kami gunakan, tindakan untuk ngrx / Efek, dan dalam hal ini juga repositori (perhatikan bahwa ini adalah demo, dan kami mendapatkan pengguna yang dipilih dari daftar pengguna di repositori kami).

Ini hampir struktur yang sama yang akan Anda lihat dengan efek apa pun. Dalam hal ini, kami hanya mengirim tindakan yang berhasil, tetapi kami dapat mengirim kesalahan atau kondisi lain yang ingin kami proses dalam aplikasi reduksi kami.

Pertimbangkan efek konfigurasi (store / effects / config.effects.ts):

gambar

Sekarang saatnya berbicara tentang penyeleksi ...


, .
Tidak masuk akal untuk mengulang sampel slicing dari negara kita di mana-mana, jadi mari kita buat beberapa penyeleksi yang dapat kita gunakan kembali.

Seperti biasa, mari kita pertama-tama melihat pemilih pengguna (store / selectors / user.selectors.ts):

gambar

Ini benar-benar dapat dimengerti karena kami tidak melakukan transformasi data apa pun di penyeleksi kami, tetapi cukup mengembalikan potongan toko yang dirujuk oleh pemilih menggunakan fungsi tersebut createSelector dari ngrx / store.

Parameter pertama adalah fragmen dari penyimpanan yang akan digunakan untuk menerima data (bisa berupa array dengan beberapa bagian negara), parameter kedua adalah fungsi anonim yang akan memutuskan apa yang akan dikembalikan oleh pemilih.

Mari kita lihat penyeleksi konfigurasi (store / selectors / config.selectors.ts):

gambar

Pengaturan akhir


Yah, kami telah menciptakan semua yang dibutuhkan penyimpanan kami, tetapi kami masih kekurangan satu hal - untuk menyatukan semuanya. Saya akan melakukan ini di modul aplikasi, tetapi Anda dapat menerapkan hal yang sama di modul utama aplikasi Anda.

Mari kita tambahkan modul aplikasi:

gambar

Apa yang telah kita lakukan di sini:

  1. Kami mengimpor gearbox kami dan menyediakannya di modul penyimpanan forRoot.
  2. Kami mengimpor efek kami dan menyediakannya di dalam array di modul efek forRoot.
  3. Kami mengatur konfigurasi untuk modul state router yang menyediakan router stateKey.
  4. Dan kami menambahkan alat pengembang toko jika lingkungan tidak berproduksi.

Dua langkah pertama diperlukan, sedangkan langkah 3 dan 4 saya sangat merekomendasikan, tetapi tidak diperlukan.

Sekarang akhirnya kita selesai ... kita dapat menggunakan penyimpanan kita dalam komponen!

Penggunaan penyimpanan di beberapa komponen


Kami mendekati akhir! Mari kita lihat bagaimana menggunakan penyimpanan kami ...

Pertama, mari kita konfigurasi ketika aplikasi dimulai:

gambar

  1. Kami menambahkan penyimpanan ke komponen aplikasi kami.
  2. Kami menyetel properti komponen ke nilai pemilih dalam konfigurasi, karena kami ingin menampilkan beberapa informasi ini dalam HTML.
  3. Di onInit, kami mengirimkan tindakan untuk mendapatkan konfigurasi.

Itu saja ... Kami sudah mengkode efek yang akan mengontrol tindakan ini, dan peredam yang akan menangani efek ini. Segera setelah Toko memasuki keadaan baru, pemilih akan mengubah nilai properti kami.

Cara mengaitkan ini dengan HTML:

gambar

Segera setelah config $ memiliki nilai, kita akan melihatnya dalam HTML.

Sekarang mari kita lihat daftar pengguna (wadah / pengguna / users.component.ts):

gambar

  1. Sama seperti kita mengelola konfigurasi, kita akan mendapatkan daftar pengguna. Pertama, kami menyuntikkan repositori ke dalam komponen pengguna.
  2. Di onInit, kami memposting tindakan untuk mendapatkan pengguna.
  3. Kami membuat properti untuk komponen dan menetapkannya daftar pengguna menggunakan pemilih daftar pengguna.

HTML terlihat seperti ini:

gambar

Kami menampilkan daftar pengguna dalam komponen presentasi, mengirimkan daftar dan mengaitkan pengguna yang dipilih dengan fungsi navigasi, yang dapat dilihat pada komponen wadah pengguna di atas.

Mari kita lihat komponen kontainer kustom: Komponen

gambar

ini menerima pengidentifikasi parameter dari rute yang diaktifkan, dan Anda mungkin sudah terbiasa dengan yang lain, mengirimkan pengidentifikasi sebagai parameter, memilih pengguna yang dipilih ...

Jika Anda mendebug aplikasi, Anda dapat melihat alat pengembang, yang cukup sederhana untuk menggunakan ... tetapi dalam artikel ini kami telah mempelajari cukup banyak, dan saya harap Anda dapat dengan mudah menemukan alat-alat ini.

Kesimpulan


Pada artikel ini, saya mencoba untuk memberikan pengantar yang jelas dan dapat dimengerti untuk NGRX, memberi Anda semua yang perlu Anda ketahui untuk memulai pengembangan menggunakan alat ini.

Saya sangat berharap bahwa artikel ini akan membantu Anda memahami templat tindakan dan merekomendasikan agar Anda mengunduhnya dan bermain sedikit dengan kode tersebut.

More articles:


All Articles