Menghantar Action dalam Aplikasi Redux

Sekarang kita mempunyai reducer untuk mengemaskini slice dengan reaksi. Sekarang kita perlu menambah penghantaran action, yang akan dicetuskan apabila pengguna mengklik butang reaksi. Tetapi sebelum itu, untuk memastikan semuanya berfungsi sepenuhnya, kita perlu membuat beberapa perubahan.

Mari buka aplikasi produk kita, dan dalamnya fail productsSlice.js. Lihat pada takrifan initialState. Nampak? Dalam objek tiada sifat dengan reaksi. Mari kita betulkan ini, dengan menetapkan pembilang setiap reaksi kepada 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 pengawalan, tambahkan sifat reactions sendiri. Sifat ini juga perlu kita tambahkan di bawah dalam kod untuk reducer productAdded, supaya dalam produk baru juga terdapat fungsi sedemikian. Mari kita lakukan ini untuk kaedah preparenya:

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 mulakan penghantaran action. Buka fail UserReactions.jsx, kemudian import hook useDispatch dan reactionClicked ke dalamnya:

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

Pada permulaan kod dalam badan fungsi UserReactions baris pertama (sebelum const userReactions ... ) tulis:

const dispatch = useDispatch()

Dan pasangkan pada butang reaksi penghantaran reactionClicked apabila diklik, pada masa yang sama id produk akan disampaikan 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 untuk kita memaparkan komponen dengan reaksi dalam susun atur untuk halaman kami. Mari lakukan ini dalam fail ProductsList.jsx sebelum elemen Link:

<UserReactions product={product} />

Dan sama juga sebelum elemen Link pada halaman produk dalam fail ProductPage.jsx:

<UserReactions product={product} />

Sekarang, apabila semuanya telah berada di tempatnya, kita boleh menjalankan aplikasi kita. Mari cuba klik pada butang reaksi. Kita boleh menambah produk baru dan juga menekan pada mereka. Sekarang, di mana sahaja kita klik pada butang reaksi, nilai yang diubah akan dipaparkan untuk produk ini pada semua halaman. Lihat halaman produk individu (di mana anda mengklik pada reaksi) dan halaman dengan senarai mereka dan sebaliknya, untuk semua halaman bilangan reaksi untuk produk tertentu akan sama.

Pelajaran ini adalah yang terakhir dalam bab mengenai bekerja dengan data dalam Redux. Kami bekerja lebih mendalam dengan data dalam Redux store dan sekarang tahu, bagaimana untuk menambah fungsi yang kita perlukan dalam aplikasi dan menggunakan data dalam komponen React.

Buka aplikasi anda dengan pelajar. Dalam fail studensSlice.js, tambahkan sifat votes kepada objek untuk pengawalan dengan medan yang sepadan. Lakukan ini dan untuk reducer studentAdded.

Di dalam fungsi UserVotes dalam fail UserVotes.jsx, gunakan dispatch untuk hook useDispatch dan lakukan penghantaran action voteClicked apabila klik pada butang undian, sampaikan kepadanya id pelajar dan nama vote, serupa dengan yang ditunjukkan dalam pelajaran.

Paparkan butang untuk undian dalam susun atur untuk komponen StudentsList dan StudentPage.