Istilah-Istilah Dasar dalam Redux

Dalam pelajaran ini, kita akan membahas secara singkat konsep dan istilah utama yang penguasaannya diperlukan untuk mempelajari Redux lebih lanjut.

Kita akan mulai dengan aksi (action). Ini adalah suatu peristiwa yang menggambarkan apa yang terjadi dalam aplikasi kita. Secara teknis, ini adalah objek JavaScript biasa, yang berisi bidang type, di mana kita menuliskan nama aksinya.

Bidang penting kedua dari objek aksi adalah bidang payload. Ini akan berisi muatan berguna dari aksi. Muatan berguna merujuk pada beberapa data yang diteruskan sebagai parameter ke dalam aksi.

Juga, dalam objek ini bisa terdapat bidang-bidang lain dengan informasi tambahan.

Mari kita buat sebuah aksi sebagai contoh dan beri nama addOrderAction. Misalkan ia bertanggung jawab untuk menambahkan pesanan. Maka dalam properti type kita akan tentukan bahwa pesanan telah ditambahkan (orderAdded) ke dalam daftar pesanan (orders). Dan dalam payload kita akan tentukan lebih detail, pesanan apa, misalnya - mengecat dinding:

const addOrderAction = {
	type: 'orders/orderAdded',
	payload: 'Cat tembok'
}

Agar tidak perlu menulis objek aksi secara manual setiap kali, kita bisa menggunakan yang disebut action creator - fungsi yang akan membuat dan mengembalikan objek aksi kepada kita. Mari kita beri nama addOrder. Sebagai parameter, kita akan melewatkan teks yang kita butuhkan untuk properti payload:

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

Konsep penting berikutnya dalam rantai ini adalah reducer - fungsi yang menerima state saat ini dan objek aksi. Fungsi ini memutuskan bagaimana memperbarui state dan mengembalikan state yang sudah diperbarui jika diperlukan.

Konsep berikutnya - store - ini adalah objek yang menyimpan state global saat ini dari aplikasi Redux. Objek ini memiliki metode getState, yang dapat digunakan untuk mendapatkan nilai state saat ini.

Store juga memiliki metode dispatch. Memanggilnya dan melewatkan objek aksi - adalah satu-satunya cara untuk mengubah state. Sebagai hasilnya, store akan menjalankan fungsi reducer dan menyimpan nilai state yang baru.

Dan konsep terakhir yang akan kita bahas dalam pelajaran ini adalah selector. Selector adalah fungsi khusus, yang tahu cara mengekstrak informasi dari state yang berada di store. Fungsi-fungsi ini ternyata sangat berguna saat aplikasi berkembang dan membantu menghindari pengulangan kode.

Lebih detail tentang semua konsep ini dan penerapannya dalam praktik akan kita pelajari dari bagian-bagian selanjutnya dalam tutorial ini.