🔅 ㊙️ 💅🏼 Angular: pengantar yang jelas untuk NGRX ✋🏿 👨🏾‍🌾 🏀

Tujuan artikel ini adalah untuk memberikan tampilan ngrx yang bersih dan jelas . Untuk melakukan ini, saya akan menjelaskan apa yang perlu Anda ketahui dan pahami tentang ngrx, dan kemudian kita akan melihatnya beraksi dengan contoh kode yang sederhana dan jelas.

Berikut adalah daftar topik yang akan kita bahas di artikel ini:

Apa itu ngrx?
Manfaat Menggunakan ngrx
Kekurangan menggunakan ngrx
Kapan menggunakan ngrx
Tindakan, Gearbox, Selektor, Penyimpanan dan Efek

Kelanjutan artikel dengan contoh penggunaan: "Angular: contoh menggunakan NGRX . "

Apa itu NGRX?

NGRX adalah sekelompok perpustakaan "terinspirasi" oleh pola Redux, yang, pada gilirannya, "terinspirasi" oleh pola Flux. Sederhananya, ini berarti bahwa pola Redux adalah versi sederhana dari pola Flux, dan NGRX adalah versi angular / rxjs dari pola Redux.

Apa yang saya maksud dengan versi redux "angular / rxjs" ... bagian "angular" adalah bahwa ngrx adalah pustaka untuk digunakan dalam aplikasi bersudut. Bagian dari "rxjs" adalah bahwa implementasi ngrx bekerja di sekitar aliran rxjs . Ini berarti bahwa ia bekerja menggunakan operator yang dapat diamati dan berbagai yang dapat diamati yang disediakan oleh rxjs.

Tujuan utama skema ini adalah untuk memastikan keadaan wadah yang dapat diprediksi berdasarkan pada tiga prinsip dasar.

Mari kita lihat tiga prinsip model Redux dan tunjukkan manfaat paling penting yang mereka berikan.

Satu-satunya sumber kebenaran

Dalam kasus arsitektur redux / ngrx, ini berarti bahwa keadaan seluruh aplikasi Anda disimpan di pohon objek dalam repositori yang sama.

Di satu toko? Kami akan berbicara tentang repositori nanti, tetapi untuk pemahaman umum, mereka bertanggung jawab untuk mempertahankan negara dan menerapkan perubahan ketika mereka diberitahu tentang hal itu (ketika tindakan dikirim, kami juga akan membicarakannya nanti).

Manfaat memiliki satu sumber kebenaran sangat banyak, tetapi bagi saya yang paling menarik (karena inilah yang akan memengaruhi aplikasi sudut manapun) adalah sebagai berikut:

Saat Anda membuat aplikasi Angular, Anda biasanya membagi negara dan menangani beberapa layanan. Ketika aplikasi Anda tumbuh, melacak perubahan di negara Anda menjadi semakin sulit dan akibatnya menjadi berantakan, sulit untuk debug dan memelihara. Memiliki satu sumber kebenaran memecahkan masalah ini, karena negara diproses hanya dalam satu objek dan dalam satu lokasi, jadi debugging atau menambahkan perubahan menjadi lebih mudah.

Status hanya baca

Anda tidak akan pernah mengubah status secara langsung, sebagai gantinya Anda akan mengirim tindakan yang menggambarkan tindakan dengan objek (ini bisa berupa hal-hal seperti mendapatkan, menambahkan, menghapus, atau memperbarui status).

Kirim tindakan? .. Kami akan membicarakan tindakan nanti, tetapi untuk pemahaman umum, ini adalah pengidentifikasi operasi pada aplikasi Anda, dan mereka dapat diluncurkan (atau dikirim) untuk memberi tahu aplikasi untuk melakukan operasi yang diwakili tindakan tersebut.

Dengan menghindari memperbarui status dari tempat yang berbeda dan memiliki tempat yang terpusat untuk melakukan perubahan yang merespons tindakan tertentu, Anda mendapatkan banyak manfaat. Belum lagi yang paling penting:

Anda tahu bahwa setiap perubahan status hanya akan terjadi di satu tempat. Ini memiliki dampak besar pada debugging dan pengujian.
Anda tahu bahwa jika tindakan tertentu dikirim, maka operasi di negara bagian selalu sama. Sekali lagi, ini secara langsung mempengaruhi debugging dan pengujian.

Perubahan dilakukan dengan fitur sederhana.

Suatu operasi yang dimulai dengan mengirimkan suatu tindakan akan menjadi fungsi sederhana, yang disebut redux dalam kerangka arsitektur redux.

Reduksi ini (ingat bahwa itu adalah fungsi sederhana) menerima tindakan dan status, tergantung pada tindakan yang dikirim (biasanya dengan pernyataan sakelar), mereka melakukan operasi dan mengembalikan objek status baru.

Status dalam aplikasi redux tidak berubah! Oleh karena itu, ketika peredam mengubah sesuatu dalam keadaan, itu mengembalikan objek keadaan baru.

Manfaat menggunakan fungsi murni sudah diketahui, seperti fakta bahwa mereka dapat diuji segera jika Anda melewati argumen yang sama yang Anda dapatkan sebagai hasilnya.

Pendekatan ini juga memungkinkan kita untuk berpindah di antara berbagai instance dari negara kita menggunakan alat pengembangan Redux / ngrx dan melihat apa yang telah berubah antara instance dan siapa yang telah mengubahnya, di antara hal-hal lain. Dengan demikian, menggunakan fungsi murni dan mengembalikan instance keadaan baru juga memiliki dampak besar pada debugging.

Tetapi keuntungan utama, menurut saya, adalah dengan mengikat semua data input komponen kami ke properti state, kami dapat mengubah strategi untuk mendeteksi perubahan yang didorong, dan ini akan meningkatkan kinerja aplikasi.

Hebat ... Jadi, apa manfaat menggunakan NGRX?

Kami sudah menyebutkan sebagian besar dari mereka ketika kami berbicara tentang prinsip-prinsip template redux. Tapi mari kita perhatikan keuntungan paling penting dari menggunakan template redux dalam aplikasi (menurut saya):

, , .
redux , .
, , , , ngrx rxjs, .
ngrx, .

…

NGRX, , . , , , . , .
. , - , , , , , , . () rxjs .
NGRX Google, , , Angular ngrx. - , , .

NGRX

Dengan demikian, secara umum disepakati bahwa ngrx harus digunakan dalam proyek-proyek menengah / besar ketika manajemen negara menjadi sulit untuk dipertahankan. Beberapa orang yang lebih fanatik akan mengatakan sesuatu seperti "jika Anda memiliki kekayaan, maka Anda memiliki NGRX."

Saya setuju bahwa itu harus digunakan dalam proyek-proyek menengah atau besar ketika Anda memiliki keadaan signifikan dan banyak komponen yang menggunakan keadaan ini, tetapi Anda harus mempertimbangkan bahwa Angular sendiri menyediakan banyak solusi manajemen negara, dan jika Anda memiliki yang kuat Tim pengembang sudut, maka mungkin Anda tidak perlu khawatir tentang ngrx.

Pada saat yang sama, saya percaya bahwa tim pengembang Angular yang kuat juga dapat memutuskan untuk memasukkan ngrx dalam solusi, karena mereka tahu kekuatan penuh dari template redux, serta kekuatan yang ditambahkan oleh operator rxjs, dan mereka merasa nyaman bekerja dengan keduanya ...

Jika Anda mengharapkan jawaban sederhana, untuk memutuskan kapan harus menggunakan ngrx, Anda tidak akan mendapatkannya dan tidak mempercayai siapa pun yang memberi Anda jawaban ini di luar organisasi atau grup Anda. Keputusan tergantung pada mempelajari pro dan kontra, memahami tim Anda dan mempertimbangkan pendapat mereka.

Tindakan NGRX, Gearbox, Selectors, Storage, dan Effects

Ini adalah blok bangunan dasar aliran ngrx. Masing-masing dari mereka mengambil bagian dari proses memulai operasi untuk mengubah keadaan kita dan mendapatkan data.

gambar

Pada gambar kita melihat aliran ngrx. Mari kita jelaskan ...

. , , , .
…

«» () . — , NGRX Action. Action' ( GetUserName):

type (): , , . : '[User] Get User Login''.

payload ( ): , . , . .
, ( switch) , , .
...

— , : . ngrx , , , , , .
, - , . , - HTTP .
...

ngrx , ngrx.

Effects , - , , , , , .

, API.

, , (success, error ..), , ngrx.
, ( ), «-» ( , ).
. , ngrx , , .
...

, , , .

NGRX «» . , , .

. . «store» , .

...

Toko adalah objek (turunan dari kelas Toko ngrx) yang menggabungkan hal-hal yang kami sebutkan sebelumnya (aksi, reduksi, penyeleksi). Misalnya, ketika suatu tindakan dikirim (menggunakan fungsi kirim dari objek penyimpanan), penyimpanan adalah yang menemukan dan mengeksekusi peredam yang sesuai.

Dia juga pemegang status aplikasi.

Lanjutan artikel dengan contoh penggunaan: "Angular: contoh menggunakan NGRX . "

Angular: pengantar yang jelas untuk NGRX