Dua Ide Dasar dalam Redux

Sebelum memulai pembelajaran library Redux, mari kita berkenalan dengan dua ide dasarnya. Ide pertama, yang berkaitan dengan manajemen state, akan kita bahas menggunakan contoh penghitung biasa dengan state di React:

function Counter() {
	// State
	const [count, setCount] = useState(0)

	// Action:
	function clickHandler() {
		setCount(count + 1)
	}

	// View:
	return (
		<div>
			<span>{count}</span>
			<button onClick={clickHandler}>+</button>
		</div>
	)
}

Dalam kode ini, kita melihat state untuk variabel count - ini adalah sumber kebenaran untuk penghitung. Lalu kita melihat aksi (action) - peristiwa, yang saat diklik pengguna memicu pembaruan state. Dan akhirnya, tampilan (view), yang digunakan untuk menampilkan antarmuka pengguna.

Jadi skemanya cukup sederhana: tombol ditekan - state count (State) saat ditekan (Action) berubah, akibatnya tampilan (View) berubah - dalam kasus kita ini adalah angka di layar.

Namun, semuanya akan menjadi lebih rumit jika kita memiliki banyak komponen yang harus menggunakan state yang sama. Tentu saja, misalnya, kita bisa mengangkat state ke komponen induk, tapi solusi seperti itu tidak selalu bisa menyelesaikan masalah. Redux dalam hal ini menawarkan kita untuk membuat satu tempat dalam aplikasi, yang berisi state global dan pola perilaku tertentu saat memperbarui state tersebut. Inilah ide dasar pertama (!).

Ide kedua terkait dengan imutabilitas, yaitu ketidakberubahan data. Anda tentu saja ingat dari JavaScript, bahwa array dan objek bisa diubah. Mengubah data secara langsung di Redux, seperti di framework lainnya, dianggap sebagai praktik yang buruk dan dapat menyebabkan konsekuensi yang tidak terduga. Oleh karena itu di Redux, objek dan array awal kita harus tetap imutabel, dan yang bisa kita ubah hanyalah salinannya.

Jelaskan, apa inti dari ide dasar pertama Redux.

Jelaskan, apa inti dari ide dasar kedua Redux.