Marrja e të Dhënave të Shitësve në Redux

Le të startojmë aplikacionin tonë me produktet. Ne shohim që në kartat e produkteve nuk shfahen shitësit. Le t'i marrim ata nga serveri dhe t'i shfaqim këto të dhëna. Për këtë na duhet të kryejmë një sekuencë veprimesh tashmë të njohura.

Për fillim, le të hapim skedarin server.js. Le të gjejmë vargun handlers dhe t'i shtojmë atij një tjetër përpunim të kërkesës GET (pas përpunimit të GET për produktet). Siç e shihni, ajo është pothuajse identike:

http.get('/fakeServer/sellers', async () => {
	await delay(ARTIFICIAL_DELAY_MS)
	return HttpResponse.json(db.seller.getAll())
}),

Kërkesën në server e kemi përpunuar. Në fazën tjetër ne në skedarin sellersSlice.js duhet të shkruajmë një thunk për marrjen e të dhënave nga serveri. Për këtë, le të importojmë në të client dhe createAsyncThunk:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { client } from '../../api/client'

Tani ne do të marrim shitësit nga serveri, prandaj le t'i heqim ata nga initialState, duke lënë thjesht kllapa boshe:

const initialState = []

Dhe pastaj, para funksionit sellersSlice le të krijojmë thunk-un tonë fetchSellers. Klientit ne do t'i kalojmë rrugën e specifikuar nga ne në server:

export const fetchSellers = createAsyncThunk(
	'sellers/fetchSellers',
	async () => {
		const response = await client.get('/fakeServer/sellers')
		return response.data
	}
)

Na mbetet vetëm të krijojmë një reducer shtesë për sellersSlice. Le të kufizohemi këtu në përpunimin e kërkesës së suksesshme. Të gjitha veprimet, të gjeneruara nga fetchSellers, do të jenë identike me veprimet e fetchProducts:

const sellersSlice = createSlice({
	name: 'sellers',
	initialState,
	reducers: {},
	extraReducers(builder) {
		builder.addCase(fetchSellers.fulfilled, (state, action) => {
			return action.payload
		})
	},
})

Ju kujtoj se herën e kaluar kur morëm produktet ne ndryshuam vlerën aktuale të state. Këtu ne shfrytëzuam një rrugë paksa të ndryshme dhe thjesht u kthyem një vlerë të re, kështu që edhe në createSlice është e mundur. Në këtë mënyrë ne arritëm dy qëllime. Së pari, ne morëm të dhënat, dhe së dyti, tani ne kemi garanci që në listën e shitësve nuk do të shfaqet diçka tjetër, sepse ne plotësisht e rishkruajmë slice-n me vlerën action.payload.

Hapni aplikacionin tuaj me studentët. Hapni në të skedarin server.js, shtoni në vargun handlers një përpunues tjetër për kërkesën GET të profesorëve.

Dhe tani hapni skedarin teachersSlice.js. Bëjeni initialState një varg bosh, siç tregohet në mësim. Para funksionit studentsSlice shkruani thunk-un fetchTeachers.

Në funksionin createSlice shtoni reducer shtesë, kufizohuni në përpunimin e kërkesës së suksesshme.