Dërgimi i të dhënave duke përdorur thunk në Redux

Në seancën e kaluar u morëm me përpunimin e kërkesës POST në serverin tonë të rremë. Le të shkruajmë tani një funksion thunk i cili do të dërgojë kërkesën në server.

Le të hapim aplikacionin tonë me produktet, dhe në të skedarin productsSlice.js. Tani pas thunk fetchProducts ne me ndihmën e createAsyncThunk do të krijojmë thunk addProduct:

export const addProduct = createAsyncThunk()

Si parametër të parë do të kalojmë në createAsyncThunk 'products/addProduct', dhe si të dytën një callback asinkron, i cili do të pranojë një objekt me të dhënat e produktit të ri:

export const addProduct = createAsyncThunk(
	'products/addProduct',
	async (newProduct) => {}
)

Në kodin e këtij callback do të thërrasim klientin, duke i kaluar atij si parametra rrugën dhe objektin me produktin, dhe pastaj do të kthejmë të dhënat e përgjigjes:

export const addProduct = createAsyncThunk(
	'products/addProduct',
	async (newProduct) => {
		const response = await client.post('/fakeServer/products', newProduct)
		return response.data
	}
)

Tani më poshtë në kod le të shohim fushën reducers për productsSlice. Më parë ne shtonim produkt të ri me ndihmën e reducerit productAdded, në të cilin kishim metodat reducer dhe prepare. Tani ne i gjenerojmë të dhënat e nevojshme në server dhe punojmë me thunk, prandaj le të heqim këtu plotësisht reducerin productAdded nga kodi. Dhe pastaj të fusim në në metodën extraReducers (në fund të kodit të saj) një reducer shtesë, i cili në rast të kërkesës me sukses do të shtojë në slice products produktin e ri direkt nga payload i action (kujtojmë se një kod i tillë është i mundur falje createSlice):

.addCase(addProduct.fulfilled, (state, action) => {
	state.products.push(action.payload)
})

Po, meqë ra fjala, mos harroni të hiqni nanoid nga rreshtat me import, dhe productAdded nga eksporti i action në fund të skedarit.

Hapni aplikacionin tuaj me studentët. Hapni në të skedarin studentsSlice.js. Me ndihmën e createAsyncThunk krijoni një thunk tjetër addStudent, i cili do të dërgojë një kërkesë POST në server, për të shtuar një student të ri, siç tregohet në mësim.

Pastaj më poshtë bëni ndryshimet për studentsSlice: hiqni plotësisht reducerin studentAdded në vetinë reducers. Dhe në fushën extraReducers shtoni një reducer shtesë, i cili do të shtojë studentin e ri në slice students nga payload i action në rast kërkesë me sukses, siç tregohet në mësim.