Byvoeging van addisionele logika in Redux-toepassing

In hierdie sessie sal ons die laaste komponent by ons toepassing voeg. Om meer spesifiek te wees, sal ons by die produk gebruikersreaksie voeg, waar die gebruiker dit óf bestel het, óf inligting daaroor gelees het.

Kom ons maak ons produktoepassing oop. Soos in die geval van die verkoper se naam, moet ons gebruikersreaksie in verskeie plekke in die toepassing wys. En dit beteken dat ons 'n aparte komponent sal nodig hê. Daarom begin ons deur in die gids products die lêer UserReactions.jsx te skep. Kom ons skryf eers daarin 'n objek wat ons reaksies sal bevat:

const reactionObj = {
	good: '+',
	soso: '+/-',
	bad: '-',
}

En onder begin ons met die skryf van die funksie self, waarheen ons die snit product sal stuur:

export const UserReactions = ({ product }) => {}

Nou skryf ons in die krulhakies die funksieliggaam van UserReactions. Om dit te doen, herhaal ons met behulp van map die sleutel-waardepare van ons reactionObj, vir elke een kry ons die benaming vir die knoppie ('+', '+/-' of '-') en die numeriese waarde van die een of ander reaksie (ons sal dit uit product in die store trek volgens die reaksienaam):

const userReactions = Object.entries(reactionObj).map(([name, image]) => {
	return (
		<button key={name} type="button" className="reaction-button">
			{image} {product.reactions[name]}
		</button>
	)
})

En daarna aan die einde van die funksiekode gee ons die opmaak met die knoppies userReactions terug:

return <div>{userReactions}</div>

En voeg ook nog 'n bietjie styl by in index.css:

.reaction-button {
	margin-right: 10px;
	margin-bottom: 10px;
}

As dit ietwat verwarrend lyk, moenie bekommerd wees nie, later sal alles baie meer duidelijk vir jou word.

Maak jou toepassing met studente oop. In jou toepassing sal daar 'n geleentheid wees vir gebruikers om onder die studente 'n groeppleier en sportspan kaptein te kies. Daarom, nadat jy die lesmateriaal bestudeer het, skep in die gids students die lêer UserVotes.jsx. Aan die begin van die lêer skep 'n objek votesObj, waarin jy twee eienskappe sal hê - leader en captain, met waardes GL en TC, as benaming vir die knoppies.

Hieronder in die lêer na die definisie van die objek votesObj skryf die kode van die funksie UserVotes, analoog aan die materiaal uit hierdie les.