Redux aplikasiýasynda action ibermek

Indi bizde reaksiýalar slaysyny täzelemek üçin reducer bar. Häzir biz ulanyjynyň reaksiýa düwmesine basanynda işleýän action ibermek goşmaly. Ýöne ähli doly işlemegi üçin, biz birnäçe üýtgeşiklik girizmeli.

Geliň önümler bilen aplikasiýamyzy açalyň we onuň içindäki productsSlice.js faýlyna serediň. initialState kesgitlemesine serediň. Görýärsiňizmi? Obýektlerde reaksiýalar aýratynlygy ýok. Geliň muny düzelip, her bir reaksiýanyň sanagyny 0 belläliň:

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

Iniţializasiýa üçin ikinji obýekte özüňiz reactions aýratynlygyny goşuň. Bu aýratynlygy productAdded reducer üçin aşakdaky koda hem goşmaly, täze önümlerde hem şu funksiýa bolmaly. Geliň muny onuň prepare metodu üçin edeliň:

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

Indi action ibermäge başlalyň. UserReactions.jsx faýlyny açalyň, soňra onuň içine useDispatch çekilmegini we reactionClicked import edeliň:

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

Koddyň başynda UserReactions funksiýasynyň bedeninde ilkinji setirde (const userReactions ... -den öň) ýazyşdyryň:

const dispatch = useDispatch()

We reaksiýa düwmesine basylanynda reactionClicked ibermek baýlalyň, bu ýerde bizde önümiň id-si we basylan reaksiýanyň ady geçiriler:

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

Indi biz reaksiýalar bilen komponenti sahypalarymyzyň görnüşi üçin çykarmaly. Muny ProductsList.jsx faýlynda Link elementinden öň edeliň:

<UserReactions product={product} />

We şol bir ýaly Link elementinden öň önüm sahypasynda ProductPage.jsx faýlynda:

<UserReactions product={product} />

Indi ählisi öz ýerine duran bolsa, aplikasiýamyzy işledip bilýäris. Reaksiýa düwmelerine basmaga synanyşalyň. Täze önüm goşup we olara hem basyp görüp bilýäris. Indi biz reaksiýa düwmelerine näçe basan bolsak, üýtgedilen bahalar bu önüm üçin ähli sahypalarda görkeziler. Aýratyn önüm sahypasyna (reaksiýalara basan ýeriňize) we olaryň sanaw sahypasyna serediň we tersine, ähli sahypalar üçin aýratyn önüm üçin reaksiýa sany birmeňzeş bolar.

Bu sapak Redux-da maglumatlar bilen işleýän bap üçin gutaryjy boldy. Biz Redux store-daky maglumatlar bilen has çuňňur işledik we indi aplikasiýamyza gerekli funksiýalary nädip goşmalydygyny we maglumatlary React komponentlerinde nädip ulanyp biljekdigimizi bilýäris.

Talyp aplikasiýaňyzy açyň. studensSlice.js faýlyndaky iniţializasiýa obýektlerine degişli meýdanlar bilen votes aýratynlygyny goşuň. Muny studentAdded reducer üçin hem ediň.

UserVotes.jsx faýlyndaky UserVotes funksiýasynyň içinde useDispatch çekilmegi üçin dispatch dörediň we basylanynda voteClicked aksiýasyny ibermek ediň, oňa talybyň id-sini we vote adyny geçiriň, sapakda görkezilen ýaly.

Ses bermek üçin düwmeleri StudentsList we StudentPage komponentleri üçin görnüşde çykaryň.