Action-ի ուղարկում և useDispatch hook-ը Redux-ում

Մենք գործնականում իրականացրել ենք Redux հավելվածի աշխատանքի համար անհրաժեշտ բոլոր բաղադրիչները։ Մնացել է միայն հասկանալ, թե ինչպես React կոմպոնենտից ուղարկել action: Եկեք սկսենք։

Բացեք մեր ապրանքներով հավելվածը։ NewProductForm կոմպոնենտի ֆորմայում մենք ունենք նոր ապրանքի տվյալները պահպանելու կոճակ։ Եկեք դրան ավելացնենք կլիկի դիտարկիչ։ Թող կոճակի վրա կլիկի դեպքում աշխատի onSaveProductClick դիտարկիչը։

<button type="button" onClick={onSaveProductClick}>
	պահպանել
</button>

Նոր ապրանք ստեղծելիս մեզ անհրաժեշտ կլինի նոր id դրա համար։ Մենք այն կգեներացնենք բոլորին հայտնի nanoid գրադարանի օգնությամբ։ Ի դեպ, այն պետք չէ տեղադրել, քանի որ այն արդեն գալիս է RTK փաթեթի հետ։ Եկեք ավելացնենք nanoid իմպորտում։

import { nanoid } from '@reduxjs/toolkit'

Մենք նաև հիշում ենք, որ state-ը փոխելու միակ եղանակը dispatch մեթոդը կանչելն է, որը կա store-ում և փոխանցել action օբյեկտը։ Այս մեթոդին հասնելու համար մենք կկիրառենք React-Redux useDispatch hook-ը։ Եկեք իմպորտենք այն։

import { useDispatch } from 'react-redux'

NewProductForm ֆունկցիայի կոդում ստեղծենք դրա համար dispatch հաստատունը հենց այն բանից հետո, երբ մենք ստեղծել ենք հաստատուններ մեր լոկալ state-ների համար։

const dispatch = useDispatch()

Մեզ նաև անհրաժեշտ է իմպորտել productAdded action creator-ը, որը մենք ստացել ենք նախորդ դասին։

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 ներդիրում մենք տեսնում ենք action, որը գեներացվել է ավտոմատ createSlice-ի օգնությամբ (սեղմեք, օրինակ, Raw-ի վրա)։ Ուռա՝ մենք ստիպված չէինք այն գրել ձեռքով։

Բացեք ձեր ուսանողներով հավելվածը, ապա NewStudentForm.jsx ֆայլը, ավելացրեք պահպանելու կոճակին կլիկի դիտարկիչ։

Գրեք բոլոր անհրաժեշտ իմպորտները և գրեք onSaveStudentClick դիտարկիչ ֆունկցիան, կիրառելով dispatch մեթոդը, ինչպես ցուցադրված է դասում։

Գործարկեք հավելվածը, մուտքագրեք ֆորմայի դաշտերում տվյալներ և սեղմեք պահպանելու կոճակի վրա։ Համոզվեք, որ էջի ներքևի մասում ավելացավ նոր ուսանող։

Բացեք Redux DevTools և անցեք Action և State ներդիրներով, համոզվեք, որ նոր օբյեկտը ուսանողով ավելանում է։ Նայեք ձեր գեներացված action օբյեկտին և ուղարկեք այն այս առաջադրանքի պատասխանում։