Redux aplikasiyaya əlavə məntiqin əlavə edilməsi

Bu dərsdə biz aplikasiyamiza son komponenti əlavə edəcəyik. Daha dəqiq desək, biz məhsula istifadəçi reaksiyasını əlavə edəcəyik, ya onu sifariş verən ya da onun haqqında məlumat oxuyan istifadəçi.

Gəlin məhsul aplikasiyamızı açaq. Satıcı adında olduğu kimi, bizə istifadəçi reaksiyalarını aplikasiyanın bir neçə yerində göstərmək lazımdır. Bu isə deməkdir ki, bizə ayrı bir komponent lazımdır. Buna görə də products qovluğunda UserReactions.jsx faylını yaradaraq başlayaq. Gəlin əvvəlcə icində reaksiyalarımızın olacağı obyekti təyin edək:

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

Aşağıda isə ozumuz funksiyanı yazmağa başlayaq, icine product slice-nı ötürəcəyik:

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

İndi qıvrım mötərizələr içərisində UserReactions funksiyasının gövdəsini yazaq. Bunun üçün reactionObj obyektimizin açar-dəyər cütlüklərini map ilə gəzək, hər biri üçün düymə təyinatını ('+', '+/-' və ya '-') və müəyyən bir reaksiyanın ədədi dəyərini əldə edək (bunu biz store-dakı product daxilindən reaksiyanın adına görə çıxaracağıq):

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

Və bundan sonra funksiya kodunun sonunda userReactions düymələri olan verstkanı qaytaraq:

return <div>{userReactions}</div>

Həmçinin index.css faylına bir az daha stil əlavə edək:

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

Əgər bu, bir az qarışıq görünürsə, narahat olmayın, sonra hər şey sizə daha aydın olacaq.

Tələbə aplikasiyanızı açın. Aplikasiyanızda istifadəçilər üçün qrupun starostasını və idman komandasının kapitanını tələbələr arasından seçmək imkanı olacaq. Buna görə dərsin materiallarını öyrəndikdən sonra, students qovluğunda UserVotes.jsx faylını yaradın. Faylın əvvəlində iki xüsusiyyəti - leader və captain olan, dəyərləri GL və TC olan (düymələr üçün təyinat kimi) votesObj obyektini yaradın.

Aşağıda, faylda obyektin təyinindən sonra bu dərsin materialına əsasən UserVotes funksiyasının kodunu yazın.