Bermula dengan Redux: Mengapa Redux?

Apabila anda belajar bertindak balas, anda akan hampir selalu mendengar orang mengatakan betapa hebatnya Redux dan anda harus mencubanya. Ekosistem React berkembang pada kadar yang cepat, dan terdapat banyak perpustakaan yang boleh anda sambungkan dengan React, seperti aliran, redux, middlewares, mobx, dll.

Reaktik pembelajaran adalah mudah, tetapi membiasakan diri dengan keseluruhan ekosistem React memerlukan masa. Tutorial ini adalah pengenalan kepada salah satu komponen integral dari Ecosystem React -Redux.

Terminologi Asas Non-Redux

Berikut adalah beberapa terminologi yang biasa digunakan yang mungkin tidak biasa, tetapi mereka tidak khusus untuk redux per se. Anda boleh melangkah melalui bahagian ini dan kembali ke sini apabila/jika sesuatu tidak masuk akal.

Fungsi tulen

Fungsi tulen hanyalah fungsi biasa dengan dua kekangan tambahan yang perlu dipenuhi:

1. Memandangkan satu set input, fungsi harus selalu mengembalikan output yang sama.
2. Ia tidak menghasilkan kesan sampingan.

Sebagai contoh, di sini adalah fungsi tulen yang mengembalikan jumlah dua nombor.

 / * Fungsi tambah tulen */<br> const add = (x, y) => {<br> kembali xy;<br> }<br><br> console.log (tambah (2,3)) // 5<br><br>

Fungsi tulen memberikan output yang boleh diramal dan menentukan. Fungsi menjadi tidak suci apabila ia melakukan apa -apa selain mengira nilai pulangannya.

Sebagai contoh, fungsi Tambah di bawah menggunakan keadaan global untuk mengira outputnya. Di samping itu, fungsi ini juga log nilai kepada konsol, yang dianggap sebagai kesan sampingan.

 const y = 10;<br><br> const drimeadd = (x) => {<br> console.log (`input adalah $ {x} dan $ {y}`);<br> kembali xy;<br> }<br>

Kesan sampingan yang boleh diperhatikan

"Kesan sampingan yang dapat dilihat" adalah istilah mewah untuk interaksi yang dibuat oleh fungsi dengan dunia luar. Jika fungsi cuba menulis nilai ke dalam pembolehubah yang wujud di luar fungsi atau cuba memanggil kaedah luaran, maka anda dapat dengan selamat memanggil kesan sampingan ini.

Walau bagaimanapun, jika fungsi tulen memanggil fungsi tulen yang lain, maka fungsi itu boleh dianggap sebagai murni. Berikut adalah beberapa kesan sampingan yang sama:

• membuat panggilan API
• Pembalakan ke konsol atau mencetak data
• Mutasi data
• Manipulasi Dom
• Mendapatkan masa sekarang

Komponen bekas dan persembahan

Memisahkan seni bina komponen ke dalam dua berguna semasa bekerja dengan aplikasi React. Anda boleh mengklasifikasikannya secara meluas kepada dua kategori: komponen kontena dan komponen persembahan. Mereka juga dikenali sebagai komponen pintar dan bodoh.

Komponen kontena prihatin dengan cara kerja, sedangkan komponen persembahan prihatin dengan bagaimana keadaan kelihatan. Untuk memahami konsep yang lebih baik, saya telah menutupnya dalam tutorial lain: Komponen Container vs Presentational dalam React.

Objek yang boleh berubah dan tidak berubah

Objek yang boleh berubah dapat ditakrifkan seperti berikut:

Objek yang boleh berubah adalah objek yang boleh diubahsuai selepas ia dibuat.

Ketidakhadiran adalah yang bertentangan -objek yang tidak berubah adalah objek yang negara tidak dapat diubah suai selepas ia dibuat. Dalam JavaScript, rentetan dan nombor tidak berubah, tetapi objek dan tatasusunan tidak. Contohnya menunjukkan perbezaan yang lebih baik.

 / *Rentetan dan nombor tidak berubah */<br><br> biarkan a = 10;<br><br> biarkan b = a;<br><br> B = 3;<br><br> console.log (`a = $ {a} dan b = $ {b}`); // a = 10 dan b = 3<br><br> / * Tetapi objek dan tatasusunan tidak */<br><br> / *Mari kita mulakan dengan objek */<br><br> biarkan pengguna = {<br> Nama: "Bob",<br> Umur: 22,<br> Pekerjaan: "Tiada"<br> }<br><br> aktif_user = pengguna;<br><br> aktif_user.name = "tim";<br><br> // Kedua -dua objek mempunyai nilai yang sama<br> console.log (aktif_user); // {"name": "tim", "umur": 22, "pekerjaan": "none"}<br><br> console.log (pengguna); // {"name": "tim", "umur": 22, "pekerjaan": "none"}<br><br> / * Sekarang untuk array */<br><br> Biarkan UsersId = [1,2,3,4,5]<br><br> Biarkan UsersIdDup = UsersId;<br><br> useridDup.pop ();<br><br> Console.log (UsersIdDup); // [1,2,3,4]<br> Console.log (UsersId); // [1,2,3,4]<br>

Untuk membuat objek tidak berubah, gunakan kedai.getState () -Untuk mengakses pokok keadaan semasa permohonan anda.

Store.subscribe (pendengar) -Untuk mendengar apa -apa perubahan di negeri ini. Ia akan dipanggil setiap kali tindakan dihantar.

Mari buat kedai. Redux mempunyai kaedah configureStore untuk membuat kedai baru. Anda perlu lulus pengurangan, walaupun kita tidak tahu apa itu. Jadi saya hanya akan membuat fungsi yang dipanggil reducer. Anda boleh secara pilihan menentukan hujah kedua yang menetapkan keadaan awal kedai.

src/index.js

 import {configurestore} dari "redux";<br> // ini adalah pengurangan<br> const reducer = () => {<br> / *Ada sesuatu di sini */<br> }<br><br> // InitialState adalah pilihan.<br> // untuk demo ini, saya menggunakan kaunter, tetapi biasanya menyatakan objek<br> const initialState = 0<br> const store = configureStore (reducer, initialState);<br>

Sekarang kita akan mendengar apa -apa perubahan di kedai, dan kemudian console.log() keadaan semasa kedai.

 store.subscribe (() => {<br> console.log ("Negeri telah berubah" store.getState ());<br> })<br>

Jadi bagaimana kita mengemas kini kedai? Redux mempunyai sesuatu yang dipanggil tindakan yang membuat ini berlaku.

Pencipta tindakan/tindakan

Tindakan juga merupakan objek JavaScript biasa yang menghantar maklumat dari permohonan anda ke kedai. Jika anda mempunyai kaunter yang sangat mudah dengan butang kenaikan, menekannya akan menyebabkan tindakan dicetuskan yang kelihatan seperti ini:

 {<br> Jenis: "kenaikan",<br> muatan: 1<br> }<br>

Mereka adalah satu -satunya sumber maklumat ke kedai. Keadaan kedai hanya berubah sebagai tindak balas kepada tindakan. Setiap tindakan harus mempunyai harta jenis yang menerangkan apa objek tindakan yang dimaksudkan untuk dilakukan. Selain itu, struktur tindakan itu sepenuhnya terpulang kepada anda. Walau bagaimanapun, pastikan tindakan anda kecil kerana tindakan mewakili jumlah minimum maklumat yang diperlukan untuk mengubah keadaan permohonan.

Sebagai contoh, dalam contoh di atas, jenis harta ditetapkan kepada "kenaikan", dan harta muatan tambahan dimasukkan. Anda boleh menamakan semula harta muatan kepada sesuatu yang lebih bermakna atau, dalam kes kami, meninggalkannya sepenuhnya. Anda boleh menghantar tindakan ke kedai seperti ini.

 store.dispatch ({type: "kenaikan", muatan: 1});<br>

Semasa pengekodan Redux, anda biasanya tidak akan menggunakan tindakan secara langsung. Sebaliknya, anda akan memanggil fungsi yang mengembalikan tindakan, dan fungsi -fungsi ini dikenali sebagai pencipta tindakan. Inilah pencipta tindakan untuk tindakan kenaikan yang dibincangkan sebelumnya.

 const incrementCount = (count) => {<br> kembali {<br> Jenis: "kenaikan",<br> muatan: kiraan<br> }<br> }<br>

Oleh itu, untuk mengemas kini keadaan kaunter, anda perlu menghantar tindakan incrementCount seperti ini:

 store.dispatch (incrementCount (1));<br> store.dispatch (incrementCount (1));<br> store.dispatch (incrementCount (1));<br>

Jika anda menuju ke konsol penyemak imbas, anda akan melihat bahawa ia berfungsi, sebahagiannya. Kami tidak dapat ditentukan kerana kami belum lagi mendefinisikan pengurangan itu.

Jadi sekarang kita telah meliputi tindakan dan kedai. Walau bagaimanapun, kami memerlukan mekanisme untuk menukar maklumat yang disediakan oleh tindakan dan mengubah keadaan kedai. Pengurangan melayani tujuan ini.

Pengurangan

Tindakan menggambarkan masalah, dan pengurangan bertanggungjawab untuk menyelesaikan masalah. Dalam contoh terdahulu, kaedah incrementCount mengembalikan tindakan yang membekalkan maklumat mengenai jenis perubahan yang kami mahu buat kepada negara. Reducer menggunakan maklumat ini untuk benar -benar mengemas kini keadaan. Terdapat titik besar yang diserlahkan dalam dokumen yang harus anda ingat semasa menggunakan Redux:

Memandangkan hujah -hujah yang sama, pengurangan harus mengira keadaan seterusnya dan mengembalikannya. Tiada kejutan. Tiada kesan sampingan. Tiada panggilan API. Tiada mutasi. Hanya pengiraan.

Apa ini bermakna bahawa pengurangan harus menjadi fungsi murni. Memandangkan satu set input, ia harus sentiasa mengembalikan output yang sama. Selain itu, ia tidak sepatutnya melakukan apa -apa lagi. Juga, pengurangan bukanlah tempat untuk kesan sampingan seperti membuat panggilan Ajax atau mengambil data dari API.

Mari isi reducer untuk kaunter kami.

 // ini adalah pengurangan<br><br> const reducer = (state = initialState, action) => {<br> suis (action.type) {<br> kes "kenaikan":<br> Kembali tindakan negara.payload<br> Lalai:<br> Kembali keadaan<br> }<br> }<br>

Reducer menerima dua argumen -keadaan dan tindakan -dan ia mengembalikan keadaan baru.

 (sebelumnya, tindakan) => NewState<br>

Negeri menerima nilai lalai, initialState , yang akan digunakan hanya jika nilai keadaan tidak ditentukan. Jika tidak, nilai sebenar negara akan dikekalkan. Kami menggunakan pernyataan Switch untuk memilih tindakan yang betul. Segarkan penyemak imbas, dan semuanya berfungsi seperti yang diharapkan.

Mari tambahkan kes untuk DECREMENT , tanpa kaunter tidak lengkap.

 // ini adalah pengurangan<br><br> const reducer = (state = initialState, action) => {<br> suis (action.type) {<br> kes "kenaikan":<br> Kembali tindakan negara.payload<br> kes "penurunan":<br> Kembali Negeri - Tindakan.Payload<br> Lalai:<br> Kembali keadaan<br> }<br> }<br>

Inilah pencipta tindakan.

 const decrementCount = (count) => {<br> kembali {<br> Jenis: "Penurunan",<br> muatan: kiraan<br> }<br> }<br>

Akhirnya, hantar ke kedai.

 store.dispatch (incrementCount (4)); // 4<br> store.dispatch (decrementCount (2)); // 2<br>

Itu sahaja!

Ringkasan

Tutorial ini dimaksudkan untuk menjadi titik permulaan untuk menguruskan negara dengan Redux. Kami telah meliputi semua perkara penting yang diperlukan untuk memahami konsep asas redux seperti kedai, tindakan, dan pengurangan. Menjelang akhir tutorial, kami juga mencipta kaunter demo Redux yang berfungsi. Walaupun tidak banyak, kami belajar bagaimana semua kepingan teka -teki bersesuaian.

Selama beberapa tahun kebelakangan ini, React telah berkembang popular. Malah, kami mempunyai beberapa item di pasaran yang tersedia untuk pembelian, semakan, pelaksanaan, dan sebagainya. Jika anda mencari sumber tambahan di sekitar React, jangan ragu untuk menyemaknya.

Dalam tutorial seterusnya, kami akan menggunakan perkara -perkara yang telah kami pelajari di sini untuk membuat aplikasi React menggunakan Redux. Tinggal sehingga itu. Kongsi pendapat anda dalam komen.

Atas ialah kandungan terperinci Bermula dengan Redux: Mengapa Redux?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!