Redux-та action жиберүү жана useDispatch hook

Биз Redux колдонмосу иштөө үчүн дээрлик бардык курамдык бөлүктөрд ишке ашырдык. React компонентинен action жиберүүнү гана түшүнүп калуу керек. Кирүүчү.

Продуктулар менен болгон колдонмобузду ачыңыз. NewProductForm компонентинин формасында бизде жаңы продукттун маалыматтарын сактоо үчүн баскыч бар. Ага чыкылдатууну иштетүүчүнү тиркеп коёлу. Ага чыкылдатуу менен onSaveProductClick иштетүүчүсү иштесин:

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

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

import { nanoid } from '@reduxjs/toolkit'

Ошондой эле биз эстеп турабыз, state-ти өзгөртүүнүн жалгыз жолу - dispatch методун чакыруу, ал store-до бар жана action объектин өткөрүп берүү. Бул методго жетүү үчүн биз React-Redux хугу useDispatch колдонобуз. Аны да импорттойлу:

import { useDispatch } from 'react-redux'

NewProductForm функциясынын кодунан биз аны dispatch константасы үчүн биздин локалдык state-тер үчүн константаларды түзгөндөн кийин эле түзөбүз:

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ден тышкары биздин action products/productAdded көрөбүз. Оң жагында биз Action жана State вкладкаларына чыкылдап, @@INIT жана products/productAdded ортосунда которулуп, көрө алабыз. Эми биз көрөбүз, жаңы продукт кошулган. Ошондой эле Action вкладкасында биз createSlice жардамы менен автоматтык түрдө түзүлгөн action-ди көрөбүз (мисалы, Raw үчүн чыкылдаңыз). Ура: бизге аны кол менен жазып чыгуунун кажети калбады.

Студенттер менен болгон колдонмоңузду ачыңыз, андан кийин NewStudentForm.jsx файлын ачыңыз, сактоо баскычына чыкылдатууну иштетүүчүнү тиркеңиз.

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

Колдонмоңузду иштетиңиз, форманын талааларына маалымат кирип, сактоо баскычына басыңыз. Баракчанын түбүндө жаңы студент кошулганына ынаныңыз.

Redux DevTools ачып, Action жана State вкладкаларынан өтүңүз, жаңы студент объектиси кошулганына ынаныңыз. Сиз үчүн түзүлгөн action объектисин көрүңүз, аны бул тапшырмага жооп катары жөнөтүңүз.