ReactJS Advanced: Amalan Terbaik untuk React + Redux + Sagas

kopi untuk pemikiran

Perkara pertama dahulu, pengenalan ringkas mengenai apa yang React. Ia adalah perpustakaan JavaScript yang digunakan untuk membina antara muka pengguna. Ia telah mengubah landskap pembangunan hadapan sejak ia keluar. Oleh itu, jika anda bercita-cita untuk menjadi perpustakaan pembelajaran pemaju front-end seperti React atau Vue.js, hampir penting dalam industri hari ini. Berikut adalah tutorial hebat jika anda baru mula belajar React. https://reactjs.org/tutorial/tutorial.html.

Saya masih ingat ketika saya mula belajar React. Saya selalu mempunyai perasaan cemas bahawa saya tidak dapat mempelajari semua yang saya perlukan, bahasa JavaScript yang sentiasa berubah di kepala saya, dan jika saya pernah mendapat sesuatu yang betul, saya akan selalu bertanya pada diri sendiri, adakah ia benar-benar cara terbaik untuk melakukannya? Selepas beratus-ratus tutorial dalam talian, carian Youtube, dan belum selesai (dan cenderung tidak dimakan) cawan kopi, saya akhirnya mempunyai pemahaman yang teguh tentang apa yang cuba dibawa oleh React ke dalam jadual JavaScript.

Walau bagaimanapun, saya sentiasa berusaha untuk mencari tutorial yang membungkus semua konsep maju React ke dalam satu tutorial padat.

Juga, saya masih ingat dengan kesulitan memahami konsep ini apabila ia digunakan dalam kod sumber yang besar. Itulah jurang bahawa artikel ini cuba untuk mengisi. Alat dan konsep lanjutan dimasukkan ke dalam aplikasi mudah kami, ini semata-mata untuk tujuan tutorial dan anda tidak boleh menggunakan konsep ini jika aplikasi anda tidak memerlukannya.

Cukup dengan chit-chat. Mari kita bercakap kod. Muat turun kod selesai dari repo ini dan ikuti README supaya anda dapat melihat dan merasakan apa yang akan kita bina di sini. https://github.com/jelorivera08/react-starter-pack.

Halaman pendaratan aplikasinya

Di atas, anda boleh melihat keadaan kiraan yang dipaparkan dan empat butang yang mencetuskan tindakan masing-masing. Tindakan mereka adalah jelas.

pemilih

Pergi ke fail selectors.js di dalam kontainer Kaunter, konsep maju pertama yang kami tangani di sini ialah createSelector. Dengan melihat kod tersebut, pertama, pemboleh ubah kiraan kod mengambil keadaan kiraan di dalam pokok negeri redux menggunakan state.get ('count').

Kemudian, kami membuat pemilih menggunakan kaedah tersebut. Ini membantu kami memformat negeri / data yang kami terima daripada pohon negeri redux dan dengan melakukan ini, kami menyimpan banyak masa pengekodan fungsi baru yang mengendalikan penstrukturan semula negeri atau memformat keadaan sasaran setiap kali kami memerlukannya untuk membuat sesuatu di hadapan -end. Dalam contoh ini, saya tidak mengubah keadaan yang saya terima. Saya baru saja kembali keadaan biasa untuk tujuan demo.

Kemudian, fungsi yang dihasilkan akan digunakan di dalam petaStateToProps, dan dengan petaStateToProps, secara semulajadi, perkara seterusnya untuk mengkonfigurasi adalah mapDispatchToProps.

buat tindakan

Setiap kali menghantar tindakan reducer, kami selalu mengisytiharkan jenisnya dan kes saklar yang sama kepada pengurangan yang akan dimasukkan kemudian untuk menukar keadaan aplikasi. Dengan pakej createActions dari reduxsauce, kita boleh memukul dua burung dengan satu batu. Kita juga perlu memformatkan pengurangan dengan reduxsauce untuk mendapat manfaat sepenuhnya daripada pakej ini.

pengurang

Di atas adalah pengurang aplikas kami. Negeri awal disertakan oleh API JS dari tidak berubah dan sebagai nama paket terpakai, ia melindungi keadaan permulaan dari bermutasi. Reaktik sangat ketat dengan konsep ini supaya sentiasa ingat ini. API penciptaReducer dari reduxsauce mempunyai dua hujah.

Pertama, keadaan permulaan. Kedua, objek yang mempunyai kunci untuk jenis tindakan dan nilai sebagai fungsi yang reducer akan menyala apabila jenis sepadan dengan panggilan penghantaran. Gabung, kemudian, mengubah pokok keadaan redux dengan sewajarnya. Tidak ada aplikasi hayat sebenar yang tidak tahu cara mengendalikan panggilan tak segerak API betul? Betul.

redux saga

Berikut adalah bahagian saga program kami. Semuanya adalah sama kecuali dengan cara kita memanggil tindakan kita. Kami menggunakan jenis tindakan yang kami buat sebelum ini dan menggunakannya di dalam saga pengawas kami untuk menghantar panggilan tidak segerak yang kemudiannya akan menjejaskan pokok negeri redux kami.

Kelewatan ada di sana untuk mengolok-olokkan latensi rangkaian untuk rasa asynk aplikasi yang lebih baik. Oh, dan akhirnya, mari pastikan kita tidak melupakan prestasi.

kod pemisahan

Pemisahan kod adalah cara terbaik untuk meningkatkan prestasi aplikasi web. Kod JavaScript mengambil tol paling banyak pada data pengguna. Ingatlah bahawa, dengan pemisahan kod, ia membolehkan pengguna akhir memuat turun sebahagian daripada kod yang diperlukan untuk kecekapan penggunaan data.

Kesimpulannya,

Terdapat banyak pakej dan alat di luar sana yang membantu kami, jurutera perisian membuat lebih bersih dan kod yang lebih cekap. datang dengan kos, kos pemahaman sistem asas dan yang berfikir dalam React.

Reaktik Pembelajaran menghendaki anda untuk mengalihkan paradigma pengekodan anda menjadi satu lagi yang berbeza berbanding dengan set sebelumnya pengekodan di depan. Alat dan pakej saya telah dibincangkan dalam artikel ini merangkumi prinsip-prinsip yang diperlukan untuk kod yang indah dan cekap dalam React dan itulah yang membuat pemaju luar biasa.

Selalu perkara-perkara kecil.

Dengan itu, saya harap saya telah membantu anda memajukan lagi pemahaman tentang React dengan artikel kecil ini. Cheers!