Përgatitja e të Dhënave për Objektin action në Redux

Kohët e fundit kemi biseduar për faktin se funksioni createSlice pret një argument gjatë krijimit të action.payload. Nga njëra anë kjo thjeshton përdorimin e saj, nga ana tjetër mund të kërkojë lëvizje shtesë për përgatitjen e përmbajtjes së objektit action.

Le të hapim aplikacionin tonë me produktet, dhe në të skedarin NewProductForm.jsx. Kushtojini vëmendje rreshtit të mëposhtëm të kodit:

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

Këtu ne po mbledhim objektin payload drejtpërdrejt në komponentin React dhe po e kalojmë atë në action productAdded. Po sikur të na duhet të dërgojmë të njëjtin action nga disa komponentë ose logjika për mbledhjen të rezultojë e ndërlikuar? Në parim, komponentit tonë nuk duhet t'i interesojë se si duket objekti në payload për këtë action. Përveç kësaj, nuk na përshtatet duplikimi i vazhdueshëm i kodit.

Këto probleme përsëri mund të na ndihmojë t'i zgjidhë i famshmi ynë createSlice, pasi që gjatë shkrimit të reduktorit ai na lejon të përdorim funksionin callback prepare, në të cilin mund të shkruajmë logjikë të ndryshme, të gjenerojmë numra të rastësishëm dhe të tjera. Në këtë rast vlera për fushën e reduktorit mund të paraqitet në formën e objektit të mëposhtëm:

{reducer, prepare}

Le të hapim skedarin tonë productsSlice.js dhe të ndryshojmë kodin për reduktorin productAdded. Tani ky pjesë e kodit:

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

Do ta ndryshojmë në këtë, ku funksioni reducer do të merret me përditësimin e state në store, dhe prepare - do të kthejë objektin payload me id-në e gjeneruar dhe të dhënat tona të tjera:

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

Meqenëse tani do të gjenerojmë id këtu, dhe jo në komponent, le të shtojmë nanoid në import:

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

Së fundi, le të bëjmë ndryshimet në NewProductForm.jsx. Në vend të rreshtit:

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

Do të kemi këtë, ku ne thjesht përmes presjeve do t'ia kalojmë të dhënat e nevojshme (mos harroni në këtë skedar të hiqni nanoid nga importi):

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

Le të startojmë aplikacionin, pastaj të krijojmë një produkt të ri dhe të sigurohemi që nuk kemi prishur asgjë.

Hapni aplikacionin tuaj me studentët. Në skedarin StudentsSlice.js rishkruani reduktorin tuaj studentAdded në mënyrë të tillë, që ai të jetë në formën e objektit {reducer, prepare}, siç tregohet në mësim.

Bëni ndryshimet përkatëse në skedarin NewStudentForm.jsx, siç tregohet në mësim. Startoni aplikacionin dhe sigurohuni që gjithçka funksionon si më parë.