Stuur aksie in Redux-toepassing

Nou het ons 'n reducer om die reaksie-slice by te werk. Wat ons nou moet doen, is om die stuur van 'n aksie by te voeg wat sal aktiveer wanneer die gebruiker op die reaksieknoppie klik. Maar voordat alles ten volle kan werk, moet ons 'n paar veranderinge aanbring.

Kom ons maak ons produktoepassing oop, en daarin die lêer productsSlice.js. Kyk na die definisie van initialState. Sien jy? In die voorwerpe is daar geen eienskap met reaksies nie. Kom ons reg dit deur die tellers vir elk van die reaksies op 0 te stel:

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

Voeg self die reactions eienskap by die tweede voorwerp vir inisialisering. Hierdie eienskap moet ons ook laer in die kode by die reducer productAdded voeg, sodat nuwe produkte ook hierdie funksionaliteit het. Kom ons doen dit vir sy prepare metode:

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

Nou gaan ons voort met die stuur van die aksie. Maak die lêer UserReactions.jsx oop, en voeg dan die useDispatch hook en reactionClicked daarin in:

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

Aan die begin van die kode in die liggaam van die funksie UserReactions, skryf die eerste reël (voor const userReactions ... ):

const dispatch = useDispatch()

En plaas op die reaksieknoppie die stuur van reactionClicked wanneer daar geklik word, terwyl die produk id en die naam van die reaksie waarop geklik is, oorgedra word:

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

Wat oorbly is om nou die komponent met reaksies in die opmaak vir ons bladsye te vertoon. Laat ons dit in die lêer ProductsList.jsx doen voor die Link element:

<UserReactions product={product} />

En presies dieselfde voor die Link element op die produkbladsy in die lêer ProductPage.jsx:

<UserReactions product={product} />

Nou, toe alles op sy plek gekom het, kan ons ons toepassing begin. Kom ons probeer op die reaksieknoppies klik. Ons kan 'n nuwe produk byvoeg en ook daarop druk. Nou, waar ons ook al op die reaksieknoppies klik, sal die veranderde waardes vir hierdie produk op alle bladsye vertoon word. Kyk na die bladsy van 'n individuele produk (waarop jy op reaksies geklik het) en die bladsy met hul lys en omgekeerd, vir alle bladsye sal die aantal reaksies vir 'n spesifieke produk dieselfde wees.

Hierdie les was die laaste een in die hoofstuk oor die hantering van data in Redux. Ons het meer diepgaande met data in die Redux-store gewerk en weet nou hoe om die nodige funksionaliteit by te voeg in die toepassing en data in React komponente te gebruik.

Maak jou studentetoepassing oop. Voeg in die lêer studensSlice.js die votes eienskap by die voorwerpe vir inisialisering met die bybehorende velde. Doen dit ook vir die reducer studentAdded.

Binne die funksie UserVotes in die lêer UserVotes.jsx, skep dispatch vir die useDispatch hook en doen die stuur van die aksie voteClicked wanneer daar op die stemknoppies geklik word, gee dit die student id en die naam van die vote, soortgelyk aan wat in die les gewys is.

Vertoon die knoppies vir stemming in die opmaak vir die komponente StudentsList en StudentPage.