Տվյալների պատրաստում action օբյեկտի համար Redux-ում

Վերջերս մենք ձեզ հետ խոսեցինք այն մասին, որ createSlice ֆունկցիան ակնկալում է մեկ արգումենտ action.payload ստեղծելիս: Մի կողմից դա պարզեցնում է դրա օգտագործումը, մյուս կողմից կարող է լրացուցիչ քայլեր պահանջել action օբյեկտի պարունակությունը պատրաստելու համար:

Եկեք բացենք մեր ապրանքների հավելվածը, և դրա մեջ NewProductForm.jsx ֆայլը: Ուշադրություն դարձրեք կոդի հետևյալ տողին.

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Այստեղ մենք հավաքում ենք payload օբյեկտը անմիջապես React կոմպոնենտում և փոխանցում այն productAdded action-ին: Իսկ եթե մեզ անհրաժեշտ լինի նմանատիպ action ուղարկել մի քանի կոմպոնենտներից կամ տրամաբանությունը պատրաստելու համար բարդ լինի: Սկզբունքորեն, մեր կոմպոնենտին պետք չէ իմանալ, թե ինչպիսին է payload-ի օբյեկտը տվյալ action-ի համար: Բացի այդ, մեզ չի բավարարում կոդի մշտական կրկնօրինակումը:

Այս խնդիրները մեզ կրկին կարող է օգնել լուծել մեր հայտնի createSlice-ը, քանի որ reducer գրելու դեպքում այն թույլ է տալիս մեզ օգտագործել prepare callback-ֆունկցիան, որում կարելի է գրել տարբեր տրամաբանություն, գեներացնել պատահական թվեր և այլն: Նման դեպքում reducer-ի դաշտի արժեքը կարող է ներկայացվել հետևյալ օբյեկտի տեսքով.

{reducer, prepare}

Եկեք բացենք մեր productsSlice.js ֆայլը և փոխենք կոդը productAdded reducer-ի համար: Այժմ կոդի այս հատվածը.

productAdded(state, action) {
	state.push(action.payload)
},

Մենք կփոխարինենք հետևյալով, որում reducer ֆունկցիան կզբաղվի store-ում state-ը թարմացնելով, իսկ prepare-ը՝ վերադարձնելու է payload օբյեկտը գեներացված id-ով և մեր մյուս տվյալներով.

productAdded: {
	reducer(state, action) {
		state.push(action.payload)
	},
	prepare(name, desc, price, amount) {
		return {
			payload: {
				id: nanoid(),
				name,
				desc,
				price,
				amount,
			},
		}
	},
},

Քանի որ այժմ մենք id-ն կգեներացնենք այստեղ, և ոչ թե կոմպոնենտում, եկեք ավելացնենք nanoid-ը իմպորտում.

import { createSlice, nanoid } from '@reduxjs/toolkit'

Վերջում փոխենք NewProductForm.jsx-ը: Փոխարենը.

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Մենք կունենանք այնպիսին, որում մենք պարզապես ստորակետերով կփոխանցենք մեզ անհրաժեշտ տվյալները (մի մոռացեք այս ֆայլում հեռացնել nanoid-ը իմպորտից).

dispatch(productAdded(name, desc, price, amount))

Եկեք գործարկենք հավելվածը, ապա ստեղծենք նոր ապրանք և համոզվենք, որ ոչինչ չենք կոտրել:

Բացեք ձեր ուսանողների հավելվածը: StudentsSlice.js ֆայլում վերագրեք ձեր studentAdded reducer-ը այնպես, որ այն լինի {reducer, prepare} օբյեկտի տեսքով, ինչպես ցույց է տրված դասում:

Կատարեք համապատասխան փոփոխությունները NewStudentForm.jsx ֆայլում, ինչպես ցույց է տրված դասում: Գործարկեք հավելվածը և համոզվեք, որ ամեն ինչ աշխատում է ինչպես նախկինում: