Terma Asas dalam Redux

Dalam pelajaran ini, kita akan melalui secara ringkas konsep dan terma asas yang perlu dikuasai untuk pembelajaran Redux seterusnya.

Kita mulakan dengan tindakan (action). Ini merupakan suatu peristiwa yang menerangkan apa yang telah berlaku dalam aplikasi kita. Dari segi teknikal, ia ialah objek JavaScript biasa, mengandungi medan type, di mana kita menulis nama tindakan.

Medan penting kedua dalam objek tindakan ialah medan payload. Ia akan mengandungi muatan berguna tindakan. Muatan berguna merujuk kepada beberapa data yang dihantar sebagai parameter kepada tindakan.

Objek ini juga mungkin mengandungi medan lain dengan maklumat tambahan.

Mari kita cipta satu tindakan sebagai contoh dan namakannya addOrderAction. Katakan ia bertanggungjawab untuk menambah pesanan. Maka dalam sifat type kita akan nyatakan bahawa pesanan telah ditambah (orderAdded) ke dalam pesanan (orders). Dan dalam payload kita akan nyatakan dengan lebih terperinci, pesanan apakah itu, contohnya - mengecat dinding:

const addOrderAction = {
	type: 'orders/orderAdded',
	payload: 'Paint a wall'
}

Untuk mengelak daripada menulis objek tindakan secara manual setiap kali, kita boleh menggunakan apa yang dipanggil action creator - fungsi yang akan mencipta dan memulangkan objek tindakan kepada kita. Mari kita namakannya addOrder. Kita akan menghantar teks yang diperlukan untuk sifat payload sebagai parameternya:

const addOrder = text => {
	return {
		type: 'orders/orderAdded',
		payload: text
	}
}

Konsep penting seterusnya dalam rantaian ini ialah reducer - fungsi yang menerima keadaan semasa dan objek tindakan. Fungsi ini memutuskan cara untuk mengemas kini keadaan dan memulangkan keadaan yang telah dikemas kini, jika perlu.

Konsep seterusnya ialah storan (store) - ini ialah objek yang menyimpan keadaan global semasa aplikasi Redux. Objek ini mempunyai kaedah getState, yang boleh digunakan untuk mendapatkan nilai semasa keadaan.

Storan juga mempunyai kaedah dispatch. Memanggilnya dan menghantar objek tindakan ialah satu-satunya cara untuk mengubah keadaan. Hasilnya, stor akan menjalankan fungsi reducer dan menyimpan nilai keadaan baharu.

Dan konsep terakhir yang akan kita lihat dalam pelajaran ini ialah pemilih. Pemilih ialah fungsi khas, yang tahu bagaimana untuk mengeluarkan maklumat daripada keadaan yang disimpan dalam stor. Fungsi-fungsi ini amat berguna apabila aplikasi semakin berkembang dan membantu mengelakkan pengulangan kod.

Kita akan belajar dengan lebih lanjut tentang semua konsep ini dan penggunaannya dalam amalan dari bahagian seterusnya dalam tutorial ini.