Redux иловасида action жўнатиш

Энди бизда реакциялар слайсини янгилаш учун редьюсер мавжуд. Ҳозирча биз фойдаланувчи реакция тугмасини босганда ишга тушадиган action жўнатишни қўшишимиз керак. Лекин ҳаммаси тўлиқ ишлаши учун, бизга яна бир неча ўзгартиришлар киритиш зарур.

Келгила, маҳсулотлар иловамизни очайлик, ундаги productsSlice.js файлини кетаёлик. initialState аниқланишига қаранг. Кўряпсизми? Объектларда реакциялар хусусияти йўқ. Келгила, буни хар бир реакциянинг ҳисоблагчисини 0 ға ўрнатшиб тузатамиз:

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

Иккинчи инициализация объектига reactions хусусиятини ўзингиз қўшинг. Бу хусусиятни productAdded редьюсери учун ҳам қўшишимиз керак, янги маҳсулотларда ҳам шундай функционал бўлиши учун. Келгила, буни унинг prepare методи учун қилайлик:

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

Энди action жўнатишга ўтамиз. UserReactions.jsx файлини очайлик, сўнгра унга useDispatch ва reactionClicked хукини импорт қилайлик:

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

Функция кодини бошланишида UserReactions функциясининг танида биринчи сатрда (const userReactions ... олдида) шунни ёзайлик:

const dispatch = useDispatch()

Ва реакция тугмасига клик бўлганда reactionClicked жўнатишни ўрнатамиз, бу ерда бизга маҳсулотнинг id си ва босилан реакциянинг номи ўтади:

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

Энди бизга фақат реакциялар компонентини саҳифаларимиз учун версткада чиқариш қолди. Буни ProductsList.jsx файлида Link элементи олдида қиламиз:

<UserReactions product={product} />

Ва шунинг ўхиша Link элементи олдида маҳсулот саҳифасида ProductPage.jsx файлида:

<UserReactions product={product} />

Энди ҳаммаси ўз ўрнига тушиб бўлганида, биз иловамизни ишга туширишимиз мумкин. Келгила, реакция тугмаларини босишни синаб кўрамиз. Биз янги маҳсулот қўшишимиз ва уларни ҳам босишимиз мумкин. Энди, қаерда бўлмасин биз реакция тугмаларини боссак, ўзгартирилган қийматлар бу маҳсулот учун барча саҳифаларда кўрсатилади. Алоҳида маҳсулот саҳифасига (сиз реакцияларни босган саҳифа) ва уларнинг рўйхати саҳифасига қаранг ва аксинча, барча саҳифалар учун конкрет маҳсулот учун реакциялар сони бир хил бўлади.

Бу дарс Redux да маълумотлар билан ишлаш боби учун якуний бўлди. Биз Redux store даги маълумотлар билан янада чуқуррок ишладик ва энди биз қандай қилиб иловада керакли функционални қўшишни ва React компонентларида маълумотлардан фойдаланишни биламиз.

Талабалар иловангизни очнг. studensSlice.js файлидаги инициализация объектларига мос майдонлар билан votes хусусиятини қўшинг. Буни studentAdded редьюсери учун ҳам бажаринг.

UserVotes.jsx файлидаги UserVotes функцияси ичида useDispatch хуки учун dispatch ни эълон қилинг ва овоз бериш тугмалари босилганда voteClicked экшени жўнатишни амалга оширинг, унга талабанинг id си ва vote номини ўтинг, дарсда кўрсатилганидек.

StudentsList ва StudentPage компонентлари учун версткада овоз бериш тугмаларини чиқаринг.