Kuongeza Mantiki ya Ziada katika Programu ya Redux

Katika kikao huti tutaongeza sehemu ya mwisho kwenye programu yetu. Kwa usahihi zaidi, tutaongeza majibu ya mtumiaji kwenye bidhaa ambayo ama aliagiza au kusoma kuhusu hayo.

Tufungue programu yetu ya bidhaa. Kama ilivyokuwa kwa jina la muuzaji, tunahitaji kuonyesha majibu ya watumiaji katika sehemu kadhaa za programu. Hii inamaanisha kwamba tutahitaji sehemu tofauti. Kwa hivyo tuanze kwa kuunda faili UserReactions.jsx ndani ya folda products. Hebu kwanza tuandike ndani yake kitu ambacho kitakuwa na majibu yetu:

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

Na chini tuanze kuandika utendaji yenyewe, ambao tutapita kipande product:

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

Sasa ndani ya mabano ya curly tuandike mwili wa utendaji UserReactions. Ili kufanya hivyo tutatupa kwa kutumia map jozi za ufunguo-thamani ya reactionObj yetu, kwa kila moja tutapata ufafanuzi kwa kifungo ('+', '+/-' au '-') na thamani ya nambari ya majibu fulani (tutatoa kutoka kwa product kwenye store kwa jina la majibu):

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

Na baada ya hayo mwishoni mwa msimbo wa utendaji turudishe muundo wenye vifungo userReactions:

return <div>{userReactions}</div>

Na pia tuongeze mitindo kidogo zaidi kwenye index.css:

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

Ikiwa hii inaonekana kuchanganya kidogo, usijisumbue, baadaye utaelewa zaidi kila kitu.

Fungua programu yako ya wanafunzi. Katika programu yako kutakuwa na uwezo kwa watumiaji kuchagua miongoni mwa wanafunzi mkuu wa kikundi na kapteni wa timu ya michezo. Kwa hivyo, baada ya kusoma nyenzo za somo, unda kwenye folda students faili UserVotes.jsx. Mwanzoni mwa faili unda kitu votesObj, ambacho kitakuwa na sifa mbili - leader na captain, na thamani GL na TC, kama ufafanuzi kwa vifungo.

Chini kwenye faili baada ya ufafanuzi wa kitu votesObj andika msimbo wa utendaji UserVotes, kwa mfano wa nyenzo kutoka kwenye somo hili.