Menambahkan Reducer ke Aplikasi Redux

Dalam pelajaran sebelumnya, kita membuat komponen UserReaction agar setiap produk juga memiliki reaksi pengguna. Sekarang kita perlu menulis reducer yang akan menangani penghitung reaksi ketika pengguna mengklik tombol reaksi tertentu.

Mari buka aplikasi produk kita, dan di dalamnya file productsSlice.js yang berisi semua reducer. Sekarang di properti reducers mari buat reducer lain reactionClicked (kita bisa menempatkannya pertama - sebelum productAdded, meskipun tidak masalah). Seperti biasa, kita berikan parameter state dan action:

reactionClicked(state, action) {},

Sekarang di dalam kurung kurawal, yang kita biarkan kosong pada langkah sebelumnya, mari tulis kodenya. Pertama-tama kita akan mengekstrak id produk dari payload objek action dan nama reaksi:

const { productId, reaction } = action.payload

Kemudian dari state yang diberikan, dapatkan produk yang dimaksud:

const currentProduct = state.find(product => product.id === productId)

Dan jika produk tersebut ada, maka tingkatkan nilai reaksi yang diberikan sebesar 1:

if (currentProduct) {
	currentProduct.reactions[reaction]++
}

Itu saja, kode kita untuk reactionClicked sudah siap:

reactionClicked(state, action) {
	const { productId, reaction } = action.payload
	const currentProduct = state.find(product => product.id === productId)
	if (currentProduct) {
		currentProduct.reactions[reaction]++
	}
},

Mari di akhir file tambahkan ekspor action creator yang dihasilkan:

export const {
	reactionClicked,
	productAdded,
	productUpdated
} = productsSlice.actions

Perlu dicatat dua poin penting di sini. Seperti yang Anda ingat dari pelajaran sebelumnya - mengupdate nilai secara langsung seperti ini dalam kode reducer tidak diperbolehkan (lihat baris ini: reactions[reaction]++), tapi kita bisa melakukannya karena kita melakukannya di dalam createSlice, yang menggunakan pustaka Immer. Pustaka inilah yang akan memastikan untuk mengubah kode kita menjadi update nilai yang "aman". Ini memungkinkan kita menulis hal-hal kompleks dengan cara yang lebih sederhana.

Selanjutnya, yang perlu diingat - objek action harus berisi informasi yang minimal mungkin - hanya untuk menunjukkan apa yang terjadi. Jangan lakukan perhitungan apa pun di dalamnya. Semua perhitungan untuk memperbarui state harus dilakukan di reducer, di sini Anda dapat menulis logika sebanyak yang diperlukan untuk itu.

Buka aplikasi siswa Anda dan di file studentsSlice.js tambahkan reducer lain voteClicked ke bidang reducers, seperti yang ditunjukkan dalam pelajaran. Tulis kodenya. Tugas reducer Anda - saat diklik, meningkatkan nilai vote (atau suara), yang diklik, untuk siswa tersebut, sebesar 1.

Di akhir file, jangan lupa untuk mengekspor action creator voteClicked yang dihasilkan.