Advanced ReactJS: Praktik Terbaik untuk React + Redux + Sagas

kopi untuk dipikirkan

Hal pertama yang pertama, pengantar cepat tentang apa yang Bereaksi. Ini adalah perpustakaan JavaScript yang digunakan untuk membangun antarmuka pengguna. Itu telah mengubah lanskap pengembangan front-end sejak keluar. Jadi, jika Anda bercita-cita untuk menjadi pustaka pembelajaran web pengembang web front-end seperti React atau Vue.js hampir penting dalam industri saat ini. Ini adalah tutorial yang bagus jika Anda baru mulai belajar Bereaksi. https://reactjs.org/tutorial/tutorial.html.

Saya ingat ketika saya mulai belajar Bereaksi. Saya selalu merasa cemas bahwa saya tidak akan pernah bisa mempelajari semua yang saya butuhkan, bahasa JavaScript yang terus berubah menjulang di atas kepala saya, dan jika saya pernah melakukan sesuatu dengan benar, saya akan selalu akhirnya bertanya pada diri sendiri, apakah itu benar-benar cara terbaik untuk melakukannya? Setelah ratusan tutorial online, pencarian Youtube, dan cangkir kopi yang belum selesai (dan kemungkinan besar tidak dicuci), saya akhirnya memiliki pemahaman yang kuat tentang apa yang React coba bawa ke dalam tabel JavaScript.

Namun, saya selalu kesulitan menemukan tutorial yang menggabungkan semua konsep canggih React menjadi satu tutorial ringkas.

Juga, saya ingat mengalami kesulitan memahami konsep-konsep ini ketika mereka digunakan di dalam kode sumber besar. Itulah celah yang coba diisi oleh artikel ini. Alat dan konsep canggih tertanam ke dalam aplikasi sederhana kami, ini semata-mata untuk tujuan tutorial dan Anda tidak boleh menggunakan konsep ini jika aplikasi Anda tidak membutuhkannya.

Cukup dengan obrolan. Mari kita bicara kode. Unduh kode yang sudah jadi dari repo ini dan ikuti README sehingga Anda dapat melihat dan merasakan apa yang akan kami buat di sini. https://github.com/jelorivera08/react-starter-pack.

Halaman arahan aplikasi

Di atas, Anda dapat melihat status penghitungan ditampilkan dan empat tombol yang memicu tindakan masing-masing. Tindakan mereka cukup jelas.

penyeleksi

Buka file selectors.js di dalam konter Counter, konsep lanjutan pertama yang kami tangani di sini adalah createSelector. Dengan melihat kodenya, pertama, variabel count const mengambil status count di dalam pohon redux state menggunakan state.get (‘count’).

Kemudian, kami membuat pemilih menggunakan metode tersebut. Ini membantu kami memformat status / data yang kami terima dari pohon redux state dan dengan melakukan ini, kami menghemat banyak waktu untuk mengkode fungsi baru yang menangani restrukturisasi negara atau memformat status target setiap kali kami membutuhkannya untuk membuat sesuatu di depan. -akhir. Dalam contoh ini, saya tidak mengubah status yang saya terima. Saya baru saja mengembalikan keadaan biasa untuk tujuan demo.

Kemudian, fungsi yang dihasilkan akan digunakan di dalam mapStateToProps, dan dengan mapStateToProps, tentu saja, hal berikutnya yang harus dikonfigurasi adalah mapDispatchToProps.

buat tindakan

Setiap kali mengirim tindakan peredam, kita harus selalu menyatakan jenisnya dan sakelar kasus yang sesuai ke peredam yang akan dimasuki kemudian untuk mengubah status aplikasi. Dengan paket createActions dari reduxsauce, kita dapat menabrak dua burung dengan satu batu. Kami juga harus memformat peredam dengan reduxsauce untuk mendapatkan manfaat penuh dari paket ini.

peredam

Di atas adalah peredam aplikasi kami. Keadaan awal terlampir oleh fromJS API dari tidak berubah dan seperti nama paket berlaku, itu melindungi keadaan awal dari yang tidak bermutasi. Bereaksi sangat ketat dengan konsep ini jadi selalu ingat ini. API createReducer dari reduxsauce memiliki dua argumen.

Pertama, kondisi awal. Kedua, objek yang memiliki kunci untuk tipe dan nilai tindakan sebagai fungsi yang reducer akan nyalakan sekali jenis cocok dengan panggilan pengiriman. Gabungkan, kemudian, ubah pohon status redux sesuai. Tidak ada aplikasi kehidupan nyata yang tidak tahu cara menangani panggilan API asinkron kan? Baik.

redux saga

Inilah bagian kisah dari program kami. Semuanya sama kecuali cara kita menyebut tindakan kita. Kami menggunakan jenis tindakan yang kami buat sebelumnya dan menggunakannya di dalam saga pengamat kami untuk mengirim panggilan asinkron yang kemudian akan memengaruhi pohon redux state kami.

Penundaan ada untuk mengejek latensi jaringan untuk nuansa aplikasi yang jauh lebih baik dari aplikasi. Oh, dan yang terakhir, pastikan kita tidak melupakan kinerja.

pemecahan kode

Pemecahan kode adalah cara terbaik untuk meningkatkan kinerja aplikasi web. Kode JavaScript mengambil paling banyak data pengguna. Ingat itu, jadi dengan pemisahan kode, ini memungkinkan pengguna akhir hanya mengunduh bagian dari kode yang diperlukan untuk efisiensi konsumsi data.

Kesimpulannya,

Ada banyak paket dan alat di luar sana yang membantu kami, insinyur perangkat lunak membuat pembersih dan kode yang jauh lebih efisien. dilengkapi dengan biaya, biaya untuk memahami sistem yang mendasarinya dan itu adalah pemikiran dalam Bereaksi.

Learning React mengharuskan Anda untuk mengubah paradigma pengkodean Anda menjadi paradigma yang jauh lebih berbeda dibandingkan dengan pola pikir pengkodean sebelumnya di front-end. Alat dan paket yang saya bahas dalam artikel ini merangkum prinsip-prinsip yang diperlukan untuk kode dengan indah dan efisien dalam Bereaksi dan itulah yang membuat pengembang luar biasa.

Itu selalu hal-hal kecil.

Dengan itu, saya harap saya telah membantu Anda memajukan pemahaman Anda tentang Bereaksi dengan artikel kecil ini. Tepuk tangan!