Action фиристодану ва хуки useDispatch дар Redux

Мо қариб ҳамаи ҷузъҳои коркарди барномаи Redux-ро татбиқ кардем. Танҳо бо фиристодани action аз компоненти React мондааст. Оғоз мекунем.

Барномаи мо бо маҳсулотро кушоед. Дар форми компоненти 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-ро муайян кунем дар худи аввал, вақте ки мо константаҳоро барои стейтҳои локалии худ муайян кардем:

const dispatch = useDispatch()

Инчумин ба мо импорти кардани action creator productAdded лозим аст, ки мо онро дар дарси гузашта гирифтем:

import { productAdded } from './productsSlice'

Акнун мо метавонем худи функсияи обработчики onSaveProductClick-ро нависем. Инро пеш аз фармони return анҷом диҳем:

const onSaveProductClick = () => {}

Дар дохили функсия мо dispatch-ро даъват мекунем, объекти action-ро ташкил медиҳем, дар хосияти payload-и он ба мо id-и ҳосилшуда, ном, тавсиф, нарх ва миқдори маҳсулот меафтад. Ҳамаи ин маълумотро мо аз стейтҳои локали мегирем. Дар ҳол, ки дар аввал мо месанҷем дар шарт ҳамаи майдонҳо пур карда шудаанд ё не - танҳо дар ин ҳолат dispatch-ро даъват мекунем. Дар охири коди функсия мо стейтҳои локалиро ба ҳолати ибтидоӣ бармегардонем:

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 мо action-ро мебинем, ки ба таври худкор бо истифода аз createSlice ҳосил шудааст (клик кунед, масалан, ба Raw). Ҳура: ба мо онро бо даст навиштан лозим наомад.

Барномаи худро бо донишҷӯён кушоед, сипас файли NewStudentForm.jsx, обработчики кликро ба тугмаи захира кардан насб кунед.

Ҳамаи импортҳои заруриро нависед ва функсияи обработчикиро нависед onSaveStudentClick, усули dispatch-ро татбиқ кунед, чун ки дар дарс нишон дода шуд.

Барномаро оғоз кунед, маълумотро ба форми ворид кунед ва тугмаи захира карданро пахш кунед. Боварӣ ҳосил кунед, ки дар поёни саҳифа донишҷӯи нав илова шуд.

Redux DevTools-ро кушоед ва ба варақаҳои Action ва State гузаред, боварӣ ҳосил кунед, ки объекти нав бо донишҷӯ илова мешавад. Ба объекти action нигаред, ки барои шумо ҳосил шуд, онро дар ҷавоби ин вазифа фиристед.