Mengirim Action dalam Aplikasi Redux

Sekarang kita memiliki reducer untuk memperbarui slice dengan reaksi. Saat ini kita perlu menambahkan pengiriman action, yang akan terpicu ketika pengguna mengklik tombol reaksi. Namun sebelumnya, agar semuanya berfungsi sepenuhnya, kita perlu melakukan beberapa perubahan.

Mari buka aplikasi produk kita, dan di dalamnya file productsSlice.js. Perhatikan definisi initialState. Lihat? Di dalam objek-objek tidak ada properti dengan reaksi. Mari kita perbaiki ini, dengan mengatur penghitung setiap reaksi ke 0:

{
	id: '1',
	title: 'Product1',
	desc: 'This is an amazing product',
	price: '300',
	amount: '30',
	reactions: {
		good: 0,
		soso: 0,
		bad: 0,
	},
},

Pada objek kedua untuk inisialisasi, tambahkan properti reactions sendiri. Properti ini juga perlu kita tambahkan ke bawah dalam kode untuk reducer productAdded, agar produk baru juga memiliki fungsionalitas tersebut. Mari kita lakukan ini untuk method prepare-nya:

prepare(title, desc, price, amount, sellerId) {
	return {
		payload: {
			id: nanoid(),
			title,
			desc,
			price,
			amount,
			seller: sellerId,
			reactions: {
				good: 0,
				soso: 0,
				bad: 0,
			},
		},
	}
},

Sekarang mari kita lanjutkan ke pengiriman action. Buka file UserReactions.jsx, lalu impor hook useDispatch dan reactionClicked ke dalamnya:

import { useDispatch } from 'react-redux'
import { reactionClicked } from './productsSlice'

Di awal kode dalam tubuh fungsi UserReactions baris pertama (sebelum const userReactions ... ) tuliskan:

const dispatch = useDispatch()

Dan pasang pada tombol reaksi pengiriman reactionClicked saat diklik, dimana akan diteruskan id produk dan nama reaksi yang diklik:

<button
	key={name}
	type="button"
	className="reaction-button"
	onClick={() =>
		dispatch(reactionClicked({ productId: product.id, reaction: name }))
	}
>
	{image} {product.reactions[name]}
</button>

Sekarang tinggal menampilkan komponen dengan reaksi dalam markup untuk halaman kita. Mari lakukan ini di file ProductsList.jsx sebelum elemen Link:

<UserReactions product={product} />

Dan sama persis sebelum elemen Link pada halaman produk di file ProductPage.jsx:

<UserReactions product={product} />

Sekarang, ketika semuanya sudah pada tempatnya, kita dapat menjalankan aplikasi kita. Mari coba klik tombol-tombol reaksi. Kita bisa menambahkan produk baru dan juga menekan tombol-tombol tersebut. Sekarang, di mana pun kita mengklik tombol reaksi, nilai yang diubah akan ditampilkan untuk produk tersebut di semua halaman. Lihatlah halaman produk individual (di mana Anda mengklik reaksi) dan halaman daftar produk serta sebaliknya, untuk semua halaman jumlah reaksi untuk produk tertentu akan sama.

Pelajaran ini adalah yang terakhir dalam bab tentang bekerja dengan data di Redux. Kita telah bekerja lebih mendalam dengan data di Redux store dan sekarang tahu, bagaimana menambahkan fungsionalitas yang kita butuhkan ke dalam aplikasi dan menggunakan data dalam komponen React.

Buka aplikasi Anda dengan siswa. Di file studensSlice.js, tambahkan properti votes ke objek untuk inisialisasi dengan field yang sesuai. Lakukan ini juga untuk reducer studentAdded.

Di dalam fungsi UserVotes di file UserVotes.jsx, buatlah dispatch untuk hook useDispatch dan lakukan pengiriman aksi voteClicked pada klik tombol voting, berikan padanya id siswa dan nama vote, serupa dengan yang ditunjukkan dalam pelajaran.

Tampilkan tombol untuk voting dalam markup untuk komponen StudentsList dan StudentPage.