Վաճառողների տվյալների ստացումը Redux-ում

Եկեք գործարկենք մեր ապրանքներով հավելվածը։ Մենք տեսնում ենք, որ ապրանքների քարտերում վաճառողները չեն ցուցադրվում։ Եկեք դրանք ստանանք սերվերից և արտածենք այդ տվյալները։ Դրա համար մեզ պետք է կատարել արդեն ծանոթ gործողությունների հաջորդականությունը։

Սկզբում բացենք server.js ֆայլը։ Գտնենք handlers զանգվածը և ավելացնենք դրանում ևս մեկ GET-հարցման մշակում (ապրանքների համար GET-ի մշակումից հետո)։ Ինչպես տեսնում եք, այն գրեթե նույնական է։

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

Սերվերում հարցումը մշակեցինք։ Հաջորդ փուլում մենք sellersSlice.js ֆայլում պետք է գրենք thunk՝ սերվերից տվյալներ ստանալու համար։ Դրա համար ներմուծենք դրա մեջ client և createAsyncThunk։

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

Այժմ մենք վաճառողներին կստանանք սերվերից, ուստի դրանք կհեռացնենք initialState-ից, թողնելով պարզապես դատարկ փակագծեր։

const initialState = []

Իսկ այնուհետև sellersSlice ֆունկցիայից առաջ կստեղծենք մեր thunk-ը՝ fetchSellers։ Կլիենտին մենք կփոխանցենք մեր կողմից սերվերում նշված ճանապարհը։

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

Մեզ մնում է միայն sellersSlice-ի համար ստեղծել լրացուցիչ reducer։ Այստեղ կսահմանափակվենք հաջող հարցման մշակմամբ։ fetchSellers-ի կողմից գեներացված բոլոր action-ները կլինեն նույնական fetchProducts action-ներին։

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

Հիշեցնեմ, որ նախորդ անգամ ապրանքներ ստանալիս մենք փոխում էինք state-ի ընթացիկ արժեքը։ Այստեղ մենք օգտագործեցինք մի քիչ այլ եղանակ և պարզապես վերադարձրինք նոր արժեք, քանի որ createSlice-ում նույնպես դա հնարավոր է։ Այսպիսով, մենք հասանք երկու նպատակի։ Նախ, մենք ստացանք տվյալները, իսկ երկրորդ, այժմ մենք երաշխավորված ենք, որ վաճառողների ցանկում ուրիշ բան չի հայտնվի, քանի որ մենք ամբողջությամբ վերագրեցինք slice-ը action.payload արժեքով։

Բացեք ձեր ուսանողներով հավելվածը։ Բացեք դրա մեջ server.js ֆայլը, ավելացրեք handlers զանգվածում ևս մեկ մշակիչ դասախոսների GET-հարցման համար։

Իսկ այժմ բացեք teachersSlice.js ֆայլը։ Դարձրեք initialState-ը դատարկ զանգվածի, ինչպես ցույց է տրված դասում։ studentsSlice ֆունկցիայից առաջ գրեք thunk fetchTeachers։

createSlice ֆունկցիայում լրացրեք լրացուցիչ reducer, սահմանափակվեք հաջող հարցման մշակմամբ։