Redux-те action жіберу және useDispatch хукі

Біз Redux қолданушысының жұмысы үшін барлық қажетті құрамдастарды іс жүзінде жүзеге асырдық. Тек React компонентінен action жіберу қалды. Бастайық.

Өнімдерімізбен жұмыс істейтін қолданушыны ашыңыз. NewProductForm компонентінің пішінінде бізде жаңа өнім деректерін сақтау үшін батырма бар. Оған басу кезінде іске қосылатын өңдегішті қосайық. Оған басқанда onSaveProductClick өңдегіші іске қосылады:

<button type="button" onClick={onSaveProductClick}>
	save
</button>

Жаңа өнімді жасау кезінде бізге ол үшін жаңа id қажет болады. Біз оны әлемге әйгілі nanoid кітапханасының көмегімен жасаймыз. Айтпақшы, оны орнатудың қажеті жоқ, себебі ол RTK пакетімен бірге келеді. Nanoid-ті импортқа қосамыз:

import { nanoid } from '@reduxjs/toolkit'

Сондай-ақ біз state-ті өзгертудің жалғыз тәсілі - бұл store-да бар dispatch әдісін шақырып, action нысанын беру екенін білеміз. Бұл әдіске қол жеткізу үшін біз React-Redux useDispatch хукін қолданамыз. Оны да импорттайық:

import { useDispatch } from 'react-redux'

NewProductForm функциясының кодында ол үшін жергілікті state-тер үшін константаларды құрғаннан кейін бірден dispatch константасын құрамыз:

const dispatch = useDispatch()

Сондай-ақ бізге алдыңғы сабақта алған action creator productAdded импорттау керек:

import { productAdded } from './productsSlice'

Енді біз onSaveProductClick өңдегіш функциясының өзін жаза аламыз. Мұны return командасының алдында орындаймыз:

const onSaveProductClick = () => {}

Функция ішінде біз dispatch шақырамыз, action нысанын құрамыз, оның payload қасиетіне жасалған id, атауы, сипаттамасы, бағасы және өнім саны енеді. Бұл деректердің барлығын біз жергілікті state-терден аламыз. Сонымен бірге басында біз шартта барлық өрістер толтырылған ба - тек осы жағдайда dispatch шақырамыз. Функция кодының соңында біз жергілікті state-терді бастапқы күйіне қайтарамыз:

const onSaveProductClick = () => {
	if (name && desc && price && amount) {
		dispatch(
			productAdded({
				id: nanoid(),
				name,
				desc,
				price,
				amount
			})
		)

		setName('')
		setDesc('')
		setPrice(0)
		setAmount(0)
	}
}

Енді қолданушымызды іске қосамыз, пішін өрістеріне деректерді енгіземіз және сақтау батырмасын басамыз. Ура, парақшаның төменгі жағында жаңа өнім пайда болды. Redux DevTools-ты ашып, ондағы Inspector қойындысын ашсақ, сол жағында @@INIT-тен басқа біздің products/productAdded action-іміз пайда болғанын көреміз. Ал оң жақ бөлігінде біз Action және State қойындыларын басу арқылы @@INIT пен products/productAdded арасында ауыса аламыз. Енді біз жаңа өніміміздің қосылатынын көреміз. Сондай-ақ Action қойындысында біз createSlice көмегімен автоматты түрде жасалған action-ді көреміз (мысалы, Raw түймесін басыңыз). Ура: оны қолмен жазуға тура келмеді.

Студенттеріңізбен жұмыс істейтін қолданушыны, содан кейін NewStudentForm.jsx файлын ашыңыз, сақтау батырмасына басу өңдегішін қосыңыз.

Барлық қажетті импорттарды жазыңыз және сабақта көрсетілгендей dispatch әдісін қолданып, onSaveStudentClick өңдегіш функциясын жазыңыз.

Қолданушыны іске қосыңыз, пішін өрістеріне деректерді енгізіп, сақтау батырмасын басыңыз. Парақшаның төменгі жағында жаңа студент қосылғанына көз жеткізіңіз.

Redux DevTools-ты ашып, Action және State қойындылары арқылы өтіңіз, жаңа студент нысанының қосылғанына көз жеткізіңіз. Сізде пайда болған action нысанына қарап, осы тапсырмаға жауап ретінде жіберіңіз.