Toimingu saatmine Redux rakenduses

Nüüd on meil redutseerija reaktsioonide lõigu uuendamiseks. Nüüd peame lisama toimingu saatmise, mis käivitub, kui kasutaja klõpsab reaktsiooninupul. Kuid kõigepealt, et kõik täielikult töötaks, peame tegema paar muudatust.

Avame oma tooterakenduse, ja selles faili productsSlice.js. Vaadake initialState määratlust. Näete? Objektides ei ole reaktsioonide omadust. Parandame selle, määrates iga reaktsiooni loendurid väärtusele 0:

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

Teisele lähtestusobjektile lisage omadus reactions ise. Sama omadus on meil vaja lisada allpool redutseerija productAdded koodi, et ka uutel toodetel oleks see funktsionaalsus. Teeme selle tema prepare meetodi jaoks:

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

Nüüd asume toimingu saatmise juurde. Avame faili UserReactions.jsx, seejärel impordime sinna konksi useDispatch ja reactionClicked:

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

Koodi alguses funktsiooni UserReactions kehas esimesel real (enne const userReactions ... ) kirjutame:

const dispatch = useDispatch()

Ja seome reaktsiooninupule saatmise reactionClicked klõpsamisel, samal ajal edastatakse toote id ja klõpsatud reaktsiooni nimi:

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

Nüüd jääb meil vaid kuvada komponent reaktsioonidega meie lehtede jaoks visuaalkujunduses. Teeme selle failis ProductsList.jsx enne elementi Link:

<UserReactions product={product} />

Ja täpselt samamoodi enne elementi Link toote lehel failis ProductPage.jsx:

<UserReactions product={product} />

Nüüd, kui kõik on oma kohal, saame oma rakenduse käivitada. Proovime klõpsata reaktsiooninuppudel. Saame lisada uue toote ja samuti neid vajutada. Nüüd, ükskõik kus me reaktsiooninuppudele klõpsame, kuvatakse muudetud väärtused selle toote jaoks kõikidel lehtedel. Vaadake üksiku toote lehte (millel klõpsasite reaktsioonidel) ja nende loetelu lehte ning vastupidi, kõikidel lehtedel on reaktsioonide arv konkreetse toote jaoks sama.

See õppetund oli andmetega töötamise peatüki lõpetav Reduxis. Töötasime põhjalikumalt andmetega Redux poes ja nüüd teame, kuidas lisada vajalikku funktsionaalsust rakendusse ja kasutada andmeid React komponentides.

Avage oma üliõpilaste rakendus. Failis studensSlice.js lisage lähtestusobjektidele omadus votes koos vastavate väljadega. Tehke see ka redutseerija studentAdded jaoks.

Funktsiooni UserVotes sees failis UserVotes.jsx looge dispatch konksi useDispatch jaoks ning tehke toimingu voteClicked saatmine klõpsamisel hääletusnuppudele, edastage sellele üliõpilase id ja vote nimi, sarnaselt õppetükis näidatule.

Kuvage hääletusnupud visuaalkujunduses komponentidele StudentsList ja StudentPage.