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-ни ўзгартиришнинг ягона усули - бу 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)
	}
}

Энди илованимизни ишга туширамиз, форма майдонларига маълумот киритамиз ва сақлаш тугмасини босамиз. Урра, саҳифанинг pastки қисмида янги маҳсулот пайдо бўлди. Redux DevTools-ни очиб, унинг ичидаги Inspector-ни очиб, биз chap тарафда @@INIT дан ташқари products/productAdded action-и ҳам пайдо бўлганини кўрамиз. Ва chap қисмда биз Action ва State-ларни алмаштириш учун @@INIT ва products/productAdded ўртасидаги вкладкаларни боса оламиз. Энди биз янги маҳсулот қўшилганини кўрамиз. Шунингдек, Action вкладкасида биз createSlice ёрдамида автоматик яратилган action-ни кўрамиз (масалан, Raw устида босинг). Урра: биз уни қўлда ёзишга мажбур эмасмиз.

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

Барча зарур импортларни ёзинг ва onSaveStudentClick ишловчи функциясини ёзинг, дарсда кўрсатилганидек dispatch методидан фойдаланган ҳолда.

Иловангизни ишга туширинг, форма майдонларига маълумот киритинг ва сақлаш тугмасини босинг. Саҳифанинг pastки қисмида янги студент қўшилганига ишонч ҳосил қилинг.

Redux DevTools-ни очинг ва Action ва State вкладкалари бўйича юринг, янги студент объекти қўшилганига ишонч ҳосил қилинг. Сизга яратилган action объектини кўриб чикинг, ушбу вазифа жавобида уни юборинг.