Տվյալների ուղարկում thunk-ի միջոցով Redux-ում

Նախորդ դասին մենք զբաղվեցինք POST հարցման մշակմամբ մեր կեղծ սերվերում: Եկեք հիմա գրենք thunk-ֆունկցիա, որը կ ուղարկի հարցում սերվերին:

Բացենք մեր ապրանքների հավելվածը, իսկ դրա ներսում productsSlice.js ֆայլը: Հիմա thunk fetchProducts-ից հետո createAsyncThunk-ի օգնությամբ կստեղծենք thunk addProduct:

export const addProduct = createAsyncThunk()

Առաջին պարամետրով մենք կփոխանցենք createAsyncThunk-ին 'products/addProduct', իսկ երկրորդով ասինխրոն callback, որը կընդունի օբյեկտ նոր ապրանքի տվյալներով:

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

Այս կոլբեքի կոդում մենք կկանչենք կլիենտը, նրան փոխանցելով ուղին և օբյեկտը ապրանքով որպես պարամետրեր, ապա կվերադարձնենք պատասխանի տվյալները:

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

Հիմա ներքևում կոդում նայենք reducers դաշտին productsSlice-ի համար: Նախկինում մենք ավելացնում էինք նոր ապրանք productAdded ռեդյուսերի օգնությամբ, որի մեջ մենք ունեինք reducer և prepare մեթոդները: Հիմա մենք գեներացնում ենք անհրաժեշտ տվյալները սերվերում և աշխատում ենք thunk-ով, ուստի ամբողջությամբ կհեռացնենք productAdded ռեդյուսերը կոդից: Ապա կավելացնենք extraReducers մեթոդի մեջ (դրա կոդի վերջում) ևս մեկ լրացուցիչ ռեդյուսեր, որը հաջող հարցման դեպքում կավելացնի products սլայսում նոր ապրանքը ուղղակի payload-ից էքշնի (հիշենք, որ նման կոդ հնարավոր է միայն createSlice-ի եզակիության շնորհիվ):

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

Այո, ի դեպ, մի մոռացեք հեռացնել nanoid-ը իմպորտի տողերից, իսկ productAdded-ը էքշնների էքսպորտից ֆայլի վերջում:

Բացեք ձեր ուսանողների հավելվածը: Բացեք դրա ներսում studentsSlice.js ֆայլը: createAsyncThunk-ի օգնությամբ ստեղծեք ևս մեկ thunk addStudent, որը կուղարկի POST հարցում սերվերին, որպեսզի ավելացնի նոր ուսանող, ինչպես ցույց է տրված դասում:

Հաջորդիվ ներքևում կատարեք փոփոխություններ studentsSlice-ի համար: Ամբողջությամբ հեռացրեք studentAdded ռեդյուսերը reducers հատկության մեջ: Իսկ extraReducers դաշտում ավելացրեք լրացուցիչ ռեդյուսեր, որը կավելացնի նոր ուսանողի students սլայսում payload էքշնից հաջող հարցման դեպքում, ինչպես ցույց է տրված դասում: