Kuandaa Data kwa Kitu cha Action katika Redux

Hivi karibuni tulizungumza nawe kuhusu kitendakazi createSlice kinachotarajiwa hoja moja wakati wa kuunda action.payload. Kwa upande mmoja hurahisisha matumizi yake, kwa upande mwingine inaweza kuhitaji harakati za ziada kwa ajili ya kuandaa yaliyomo katika kitu cha action.

Wacha tufungue programu yetu yenye bidhaa, na ndani yake faili NewProductForm.jsx. Zingatia mstari wa kifuatacho cha kodi:

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

Hapa tunakusanya kitu payload mozimozi kwenye kijenzi cha React na tukikipitisha kwenye kitendo productAdded. Je, ni nini ikiwa tutalazimika kutuma kitendo kama hicho kutoka kwenye vijenzi kadhaa au mantiki ya kusanyiko ikawa ngumu? Kwa maana kijenzi chetu hakipaswi kujali jinsi inavyoonekana kitu katika payload kwa kitendo hiki. Zaidi ya hayo hatukubaliani na kurudia kodi mara kwa mara.

Matatizo haya yanaweza kutusaidia tena kutatua createSlice yetu maarufu, kwani wakati wa kuandika reducer inaturuhusu kutumia kitendakazi cha mwito-nyuma prepare, ambacho ndani yake tunaweza kuandika mantiki mbalimbali, kutengeneza namba nasibu na kadhalika. Kwa kesi hiyo thamani ya uga wa reducer inaweza kuwakilishwa kwa muundo wa kitu kifuatacho:

{reducer, prepare}

Wacha tufungue faili yetu productsSlice.js na tubadilishe kodi kwa reducer productAdded. Sasa kipande hiki cha kodi:

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

Tutabadilisha kuwa ifuatayo, ambayo kitendakazi reducer kitashughulikia kusasisha hali katika duka, na prepare - kurudisha kitu payload kilicho na id iliyotengenezwa na zetu data zingine:

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

Kwa kuwa sasa tutatengeneza id hapa, na si kwenye kijenzi, wacha tuongeze nanoid kwenye usafirishaji:

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

Mwisho tuingize mabadiliko kwenye NewProductForm.jsx. Badala ya mstari:

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

Tutakuwa na hii, ambayo sisi tu kupitia koma tunapitisa data tuliyohitaji (usisahau kwenye faili hii kuondoa nanoid kwenye usafirishaji):

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

Wacha tuizindue programu yetu, kisha tuunde bidhaa mpya na tuhakikishe kuwa hatujuvunja kitu chochote.

Fungua programu yako yenye wanafunzi. Kwenye faili StudentsSlice.js andika upya reducer yako studentAdded kwa njia kwamba iwe kwa muundo wa kitu {reducer, prepare}, kama inavyoonyeshwa kwenye somo.

Ingiza mabadiliko yanayofaa kwenye faili NewStudentForm.jsx, kama inavyoonyeshwa kwenye somo. Zindua programu na uhakikishe kwamba kila kitu kinafanya kazi kama zamani.