Action nosūtīšana Redux lietotnē

Tagad mums ir reducers, lai atjauninātu reakciju slīdi. Tagad mums ir jāpievieno action nosūtīšana, kas tiks aktivizēta, kad lietotājs noklikšķina uz reakcijas pogas. Bet vispirms, lai viss pilnībā darbotos, mums jāveic pāris izmaiņas.

Atvērsim mūsu produktu lietotni, un tajā failu productsSlice.js. Apskatiet initialState definīciju. Redzat? Objektos nav reakciju īpašības. Labosim to, iestatot katras reakcijas skaitītājus uz 0:

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

Otrajā inicializācijas objektam pats pievienojiet īpašumu reactions. Šī īpašība ir jāpievieno arī zemāk reducera productAdded kodam, lai arī jaunajos produktos būtu šī funkcionalitāte. Darīsim to tā prepare metodei:

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

Tagad sāksim ar action nosūtīšanu. Atveram failu UserReactions.jsx, tad importējam tajā hook useDispatch un reactionClicked:

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

Koda sākumā funkcijas UserReactions ķermenī pirmajā rindā (pirms const userReactions ... ) ierakstīsim:

const dispatch = useDispatch()

Un uzstādīsim uz reakcijas pogas nosūtīšanu reactionClicked noklikšķinot, savukārt mums tiks nodots produkta id un reakcijas nosaukums, uz kuras noklikšķināja:

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

Mums atliek tagad attēlot komponentu ar reakcijām mūsu lapu izkārtojumā. Darīsim to failā ProductsList.jsx pirms elementa Link:

<UserReactions product={product} />

Un tieši tāpat pirms elementa Link produkta lapā failā ProductPage.jsx:

<UserReactions product={product} />

Tagad, kad viss ir nostājies savās vietās, mēs varam palaist mūsu lietotni. Pamēģināsim noklikšķināt uz reakciju pogām. Varam pievienot jaunu produktu un arī nospiest uz tiem. Tagad, lai kur mēs noklikšķinātu uz reakciju pogām, mainītās vērtības tiks rādītas šim produktam visās lapās. Apskatiet atsevišķu produkta lapu (uz kuras jūs noklikšķinājāt uz reakcijām) un lapu ar to sarakstu un otiņādi, visām lapām reakciju skaits konkrētam produktam būs vienāds.

Šī nodarbība bija pēdējā nodaļā par darbu ar datiem Redux. Mēs padziļināti strādājām ar datiem Redux store un tagad zinām, kā pievienot vajadzīgo funkcionalitāti lietotnē un izmantot datus React komponentos.

Atveriet savu studentu lietotni. Failā studensSlice.js inicializācijas objektiem pievienojiet īpašumu votes ar atbilstošajiem laukiem. Dariet to arī reducerim studentAdded.

Funkcijas UserVotes iekšienē failā UserVotes.jsx izveidojiet dispatch hook useDispatch un veiciet action voteClicked nosūtīšanu noklikšķinot uz balsošanas pogām, nododiet tam studenta id un vote nosaukumu, līdzīgi kā parādīts nodarbībā.

Attēlojiet balsošanas pogas izkārtojumā komponentiem StudentsList un StudentPage.